diff options
Diffstat (limited to 'microservices/04-react-app/src/components/Navbar.jsx')
| -rw-r--r-- | microservices/04-react-app/src/components/Navbar.jsx | 67 |
1 files changed, 67 insertions, 0 deletions
diff --git a/microservices/04-react-app/src/components/Navbar.jsx b/microservices/04-react-app/src/components/Navbar.jsx new file mode 100644 index 0000000..9697c73 --- /dev/null +++ b/microservices/04-react-app/src/components/Navbar.jsx @@ -0,0 +1,67 @@ +import { Link, NavLink } from "react-router"; +import { useAuth } from "../contexts/AuthContext" +import RoleGuard from "./RoleGuard"; + +const Navbar = () => { + const {user, login, logout, isLoggedIn} = useAuth(); + + return ( + <nav className="navbar"> + {/* Logo */} + <Link to="#" className="nav-link">BrandName</Link> + + {/* Mobile Toggle (Checkbox Hack) */} + <input type="checkbox" id="nav-toggle" className="nav-toggle" /> + <label htmlFor="nav-toggle" className="hamburger"> + <span></span> + <span></span> + <span></span> + </label> + + <ul className="nav-menu"> + <li> + <NavLink className="nav-link" to="/" end> + Home + </NavLink> + </li> + <li> + <NavLink className="nav-link" to="/about" end> + About + </NavLink> + </li> + <li> + <NavLink className="nav-link" to="/posts" end> + Posts + </NavLink> + </li> + + <RoleGuard allowedRoles={['ADMIN']}> + <li> + <NavLink className="nav-link" to="/admin" end> + Admin + </NavLink> + </li> + </RoleGuard> + + {!isLoggedIn() && ( + <> + <li> + <Link to="#" className="nav-link" onClick={login}>Login</Link> + </li> + <li> + <NavLink className="nav-link" to="/register">Register</NavLink> + </li> + </> + )} + + {isLoggedIn() && ( + <li> + <Link to="#" className="nav-link" onClick={logout}>Logout {user.name}</Link> + </li> + )} + </ul> + </nav> + ) +} + +export default Navbar
\ No newline at end of file |