2020-08-29 10:19:15 +03:00
|
|
|
import { faPlus as plusIcon, faChevronDown as arrowIcon, faCogs as cogsIcon } from '@fortawesome/free-solid-svg-icons';
|
|
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
|
|
import React, { FC, useEffect } from 'react';
|
|
|
|
import { Link } from 'react-router-dom';
|
|
|
|
import { Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap';
|
|
|
|
import classNames from 'classnames';
|
2020-09-04 20:05:41 +03:00
|
|
|
import { RouteComponentProps } from 'react-router';
|
2020-08-29 10:19:15 +03:00
|
|
|
import { useToggle } from '../utils/helpers/hooks';
|
|
|
|
import shlinkLogo from './shlink-logo-white.png';
|
|
|
|
import './MainHeader.scss';
|
|
|
|
|
2020-09-04 20:05:41 +03:00
|
|
|
const MainHeader = (ServersDropdown: FC) => ({ location }: RouteComponentProps) => {
|
2020-08-29 10:19:15 +03:00
|
|
|
const [ isOpen, toggleOpen, , close ] = useToggle();
|
|
|
|
const { pathname } = location;
|
|
|
|
|
|
|
|
useEffect(close, [ location ]);
|
|
|
|
|
|
|
|
const createServerPath = '/server/create';
|
|
|
|
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="/">
|
|
|
|
<img src={shlinkLogo} alt="Shlink" className="main-header__brand-logo" /> Shlink
|
|
|
|
</NavbarBrand>
|
|
|
|
|
|
|
|
<NavbarToggler onClick={toggleOpen}>
|
|
|
|
<FontAwesomeIcon icon={arrowIcon} className={toggleClass} />
|
|
|
|
</NavbarToggler>
|
|
|
|
|
|
|
|
<Collapse navbar isOpen={isOpen}>
|
|
|
|
<Nav navbar className="ml-auto">
|
|
|
|
<NavItem>
|
|
|
|
<NavLink tag={Link} to={settingsPath} active={pathname === settingsPath}>
|
|
|
|
<FontAwesomeIcon icon={cogsIcon} /> Settings
|
|
|
|
</NavLink>
|
|
|
|
</NavItem>
|
|
|
|
<NavItem>
|
|
|
|
<NavLink tag={Link} to={createServerPath} active={pathname === createServerPath}>
|
|
|
|
<FontAwesomeIcon icon={plusIcon} /> Add server
|
|
|
|
</NavLink>
|
|
|
|
</NavItem>
|
|
|
|
<ServersDropdown />
|
|
|
|
</Nav>
|
|
|
|
</Collapse>
|
|
|
|
</Navbar>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default MainHeader;
|