github.com/quickfeed/quickfeed@v0.0.0-20240507093252-ed8ca812a09c/public/src/components/NavBar.tsx (about) 1 import React from "react" 2 import { useActions, useAppState } from "../overmind" 3 import { Link } from "react-router-dom" 4 import NavFavorites from "./NavFavorites" 5 import NavBarUser from "./navbar/NavBarUser" 6 import NavBarActiveCourse from "./navbar/NavBarActiveCourse" 7 8 9 const NavBar = (): JSX.Element => { 10 const state = useAppState() 11 const actions = useActions() 12 13 let hamburger = null 14 if (state.isLoggedIn) { 15 const classname = `clickable hamburger ${state.showFavorites ? "open" : "closed"}` 16 hamburger = <span onClick={() => actions.toggleFavorites()} className={classname}>☰</span> 17 } 18 19 return ( 20 <nav className="navbar navbar-top navbar-expand-sm flexbox" id="main" > 21 <div className="nav-child brand"> 22 {hamburger} 23 <Link to="/" style={{ color: "#d4d4d4", fontWeight: "bold" }}>QuickFeed</Link> 24 </div> 25 <NavBarActiveCourse /> 26 <NavBarUser /> 27 <NavFavorites /> 28 </nav> 29 ) 30 } 31 32 export default NavBar