shlink-web-client/src/common/MainHeader.tsx

55 lines
2 KiB
TypeScript
Raw Normal View History

import { faChevronDown as arrowIcon, faCogs as cogsIcon } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { useToggle } from '@shlinkio/shlink-frontend-kit';
2023-11-01 11:41:21 +03:00
import { clsx } from 'clsx';
2023-02-18 12:40:37 +03:00
import type { FC } from 'react';
import { useEffect } from 'react';
2022-02-06 22:07:18 +03:00
import { Link, useLocation } from 'react-router-dom';
import { Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap';
2023-09-05 10:08:42 +03:00
import type { FCWithDeps } from '../container/utils';
import { componentFactory, useDependencies } from '../container/utils';
2020-12-20 10:56:46 +03:00
import { ShlinkLogo } from './img/ShlinkLogo';
import './MainHeader.scss';
2023-09-05 10:08:42 +03:00
type MainHeaderDeps = {
ServersDropdown: FC;
};
const MainHeader: FCWithDeps<{}, MainHeaderDeps> = () => {
const { ServersDropdown } = useDependencies(MainHeader);
const [isNotCollapsed, toggleCollapse, , collapse] = useToggle();
2022-02-06 22:07:18 +03:00
const location = useLocation();
const { pathname } = location;
// In mobile devices, collapse the navbar when location changes
useEffect(collapse, [location, collapse]);
const settingsPath = '/settings';
2023-11-01 11:41:21 +03:00
const toggleClass = clsx('main-header__toggle-icon', { 'main-header__toggle-icon--opened': isNotCollapsed });
return (
<Navbar color="primary" dark fixed="top" className="main-header" expand="md">
<NavbarBrand tag={Link} to="/">
2020-12-20 10:56:46 +03:00
<ShlinkLogo className="main-header__brand-logo" color="white" /> Shlink
</NavbarBrand>
<NavbarToggler onClick={toggleCollapse}>
<FontAwesomeIcon icon={arrowIcon} className={toggleClass} />
</NavbarToggler>
<Collapse navbar isOpen={isNotCollapsed}>
<Nav navbar className="ms-auto">
<NavItem>
<NavLink tag={Link} to={settingsPath} active={pathname.startsWith(settingsPath)}>
<FontAwesomeIcon icon={cogsIcon} />&nbsp; Settings
</NavLink>
</NavItem>
<ServersDropdown />
</Nav>
</Collapse>
</Navbar>
);
};
2023-09-05 10:08:42 +03:00
export const MainHeaderFactory = componentFactory(MainHeader, ['ServersDropdown']);