costco-grocery-list/frontend/src/components/layout/Navbar.jsx

31 lines
839 B
JavaScript

import "../../styles/components/Navbar.css";
import { useContext } from "react";
import { Link } from "react-router-dom";
import { AuthContext } from "../../context/AuthContext";
export default function Navbar() {
const { role, logout, username } = useContext(AuthContext);
return (
<nav className="navbar">
<div className="navbar-links">
<Link to="/">Home</Link>
<Link to="/settings">Settings</Link>
{role === "admin" && <Link to="/admin">Admin</Link>}
</div>
<div className="navbar-idcard">
<div className="navbar-idinfo">
<span className="navbar-username">{username}</span>
<span className="navbar-role">{role}</span>
</div>
</div>
<button className="navbar-logout" onClick={logout}>
Logout
</button>
</nav>
);
}