2020-12-12 13:29:15 +03:00
|
|
|
import { faChevronDown as arrowIcon, faCogs as cogsIcon } from '@fortawesome/free-solid-svg-icons';
|
2020-08-29 10:19:15 +03:00
|
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
2023-02-18 13:11:01 +03:00
|
|
|
import classNames from 'classnames';
|
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';
|
2020-08-29 10:19:15 +03:00
|
|
|
import { Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap';
|
|
|
|
import { useToggle } from '../utils/helpers/hooks';
|
2020-12-20 10:56:46 +03:00
|
|
|
import { ShlinkLogo } from './img/ShlinkLogo';
|
2020-08-29 10:19:15 +03:00
|
|
|
import './MainHeader.scss';
|
|
|
|
|
2022-05-03 21:36:24 +03:00
|
|
|
export const MainHeader = (ServersDropdown: FC) => () => {
|
2022-03-26 14:17:42 +03:00
|
|
|
const [isOpen, toggleOpen, , close] = useToggle();
|
2022-02-06 22:07:18 +03:00
|
|
|
const location = useLocation();
|
2020-08-29 10:19:15 +03:00
|
|
|
const { pathname } = location;
|
|
|
|
|
2022-03-26 14:17:42 +03:00
|
|
|
useEffect(close, [location]);
|
2020-08-29 10:19:15 +03:00
|
|
|
|
|
|
|
const settingsPath = '/settings';
|
|
|
|
const toggleClass = classNames('main-header__toggle-icon', { 'main-header__toggle-icon--opened': isOpen });
|
|
|
|
|
|
|
|
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
|
2020-08-29 10:19:15 +03:00
|
|
|
</NavbarBrand>
|
|
|
|
|
|
|
|
<NavbarToggler onClick={toggleOpen}>
|
|
|
|
<FontAwesomeIcon icon={arrowIcon} className={toggleClass} />
|
|
|
|
</NavbarToggler>
|
|
|
|
|
|
|
|
<Collapse navbar isOpen={isOpen}>
|
2022-03-05 15:26:28 +03:00
|
|
|
<Nav navbar className="ms-auto">
|
2020-08-29 10:19:15 +03:00
|
|
|
<NavItem>
|
2022-02-13 22:20:20 +03:00
|
|
|
<NavLink tag={Link} to={settingsPath} active={pathname.startsWith(settingsPath)}>
|
2020-08-29 10:19:15 +03:00
|
|
|
<FontAwesomeIcon icon={cogsIcon} /> Settings
|
|
|
|
</NavLink>
|
|
|
|
</NavItem>
|
|
|
|
<ServersDropdown />
|
|
|
|
</Nav>
|
|
|
|
</Collapse>
|
|
|
|
</Navbar>
|
|
|
|
);
|
|
|
|
};
|