diff --git a/app/src/frontend/header.tsx b/app/src/frontend/header.tsx index 28d64834..f4f7e204 100644 --- a/app/src/frontend/header.tsx +++ b/app/src/frontend/header.tsx @@ -1,11 +1,10 @@ -import React, { Fragment } from 'react'; +import React, { Fragment, useState } from 'react'; import { NavLink } from 'react-router-dom'; import './header.css'; import { Logo } from './components/logo'; import { User } from './models/user'; -import Categories from './building/categories'; interface HeaderProps { @@ -13,171 +12,151 @@ interface HeaderProps { animateLogo: boolean; } -interface HeaderState { - collapseMenu: boolean; -} - /** * Render the main header using a responsive design */ -class Header extends React.Component { - constructor(props) { - super(props); - this.state = {collapseMenu: true}; - this.handleClick = this.handleClick.bind(this); - this.handleNavigate = this.handleNavigate.bind(this); - } - handleClick() { - this.setState(state => ({ - collapseMenu: !state.collapseMenu - })); - } + const Header : React.FC = (props) => { + const [collapseMenu, setCollapseMenu] = useState(true); - handleNavigate() { - this.setState({ - collapseMenu: true - }); - } + const handleClick = () => setCollapseMenu(!collapseMenu); + const handleNavigate = () => setCollapseMenu(true); - render() { - return ( -
-
- - + + return ( +
+
+ + + + +
+
- -
- ); - } + ): + ( + +
  • + + Log in + +
    • +
  • + + Sign up + +
    • +     + ) + } + +
    + +
    + + + + ); } export default Header;