diff options
| author | Kamal Wickramanayake <kamal@inbox.lk> | 2026-07-02 20:17:44 +0530 |
|---|---|---|
| committer | Kamal Wickramanayake <kamal@inbox.lk> | 2026-07-02 20:17:44 +0530 |
| commit | b221a83ecef1dd7f9583d5107017d24e668205a6 (patch) | |
| tree | f519d4a08e6fde2d175b2a16b6d71e90890666d2 /react/08-auth-with-context/src/components/Navbar.jsx | |
| parent | 48f6e61f90e5a8465a9cee8b501d990c89d79c33 (diff) | |
Added React global state + role based security sample app
Diffstat (limited to 'react/08-auth-with-context/src/components/Navbar.jsx')
| -rw-r--r-- | react/08-auth-with-context/src/components/Navbar.jsx | 67 |
1 files changed, 67 insertions, 0 deletions
diff --git a/react/08-auth-with-context/src/components/Navbar.jsx b/react/08-auth-with-context/src/components/Navbar.jsx new file mode 100644 index 0000000..9697c73 --- /dev/null +++ b/react/08-auth-with-context/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 |