You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
31 lines
1.0 KiB
31 lines
1.0 KiB
import React, {useState} from "react"
|
|
import {Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink} from "reactstrap";
|
|
import useAuth from "../Hooks/auth";
|
|
import {Link} from "react-router-dom";
|
|
import {onEnter} from "../Helpers/keys";
|
|
|
|
export default function Header() {
|
|
const [showMenu, setShowMenu] = useState(false);
|
|
const {isLoggedIn, logout} = useAuth();
|
|
|
|
return (
|
|
<Navbar color="dark" dark expand="md">
|
|
<NavbarBrand tag={Link} to="/">Lucifer</NavbarBrand>
|
|
<NavbarToggler onClick={() => setShowMenu(!showMenu)}/>
|
|
<Collapse isOpen={showMenu} navbar>
|
|
{isLoggedIn && (
|
|
<Nav className="ml-auto" navbar>
|
|
<NavItem>
|
|
<NavLink tag={Link} to="/lights">Grupper</NavLink>
|
|
</NavItem>
|
|
<NavItem>
|
|
<NavLink tabIndex={0}
|
|
onClick={() => logout()}
|
|
onKeyDown={onEnter(() => logout())}>Logg ut</NavLink>
|
|
</NavItem>
|
|
</Nav>
|
|
)}
|
|
</Collapse>
|
|
</Navbar>
|
|
);
|
|
}
|