ajout authentification admin/user

my-library/src/components/Navbar.jsx

@@ -1,7 +1,16 @@
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
 import '../styles/navbar.css';
 
 export default function Navbar() {
+  const { user, logout } = useAuth();
+  const navigate = useNavigate();
+
+  function handleLogout() {
+    logout();
+    navigate('/login');
+  }
+
   return (
     <nav className="navbar">
       <Link to="/" className="navbar__logo">Biblio</Link>
@@ -9,13 +18,20 @@ export default function Navbar() {
       <ul className="navbar__links">
         <li><Link to="/">Accueil</Link></li>
         <li><Link to="/books">Catalogue</Link></li>
-        <li><Link to="/orders">Commandes</Link></li>
-        <li><Link to="/profile">Mon compte</Link></li>
+        {user && <li><Link to="/orders">Commandes</Link></li>}
+        {user && <li><Link to="/profile">Mon compte</Link></li>}
+        {user?.role === 'admin' && <li><Link to="/customers">Clients</Link></li>}
       </ul>
 
       <div className="navbar__actions">
-        <button className="btn-ghost">Connexion</button>
-        <button className="btn-cta">S'inscrire</button>
+        {user ? (
+          <>
+            <span>{user.username} ({user.role})</span>
+            <button onClick={handleLogout}>Déconnexion</button>
+          </>
+        ) : (
+          <Link to="/login"><button>Connexion</button></Link>
+        )}
       </div>
     </nav>
   );