mobile navigation

frontend/src/components/Navbar.jsx

@@ -1,5 +1,7 @@
+import { useState } from "react";
 import { Link, useLocation } from "react-router-dom";
 import { useAuth } from "../contexts/AuthContext";
+import NavPanel from "./navPanel/NavPanel";
 import "./Navbar.css";
 
 const navLinks = [
@@ -11,35 +13,59 @@ const navLinks = [
 export default function Navbar() {
   const { currentUser, logout } = useAuth();
   const location = useLocation();
+  const [isNavPanelOpen, setIsNavPanelOpen] = useState(false);
 
   if (!currentUser) return null;
 
   return (
-    <nav className="navbar">
-      <div className="flex flex--center gap-sm">
-        <span className="navbar__brand">Koin Ping</span>
-        <div className="navbar__links">
-          {navLinks.map(({ to, label }) => {
-            const isActive = location.pathname === to;
-            return (
-              <Link
-                key={to}
-                to={to}
-                className={`navbar__link ${isActive ? "navbar__link--active" : ""}`}
-              >
-                {label}
-              </Link>
-            );
-          })}
+    <>
+      <nav className="navbar">
+        <div className="navbar__left">
+          <div className="navbar__brand-group">
+            <span className="navbar__brand">Koin Ping</span>
+            <Link to="/account" className="navbar__user-link navbar__user-link--mobile">
+              {currentUser.email}
+            </Link>
+          </div>
+          <div className="navbar__links">
+            {navLinks.map(({ to, label }) => {
+              const isActive = location.pathname === to;
+              return (
+                <Link
+                  key={to}
+                  to={to}
+                  className={`navbar__link ${isActive ? "navbar__link--active" : ""}`}
+                >
+                  {label}
+                </Link>
+              );
+            })}
+          </div>
         </div>
-      </div>
 
-      <div className="flex flex--center gap-lg">
-        <Link to="/account" className="navbar__user navbar__user-link">{currentUser.email}</Link>
-        <button onClick={logout} className="navbar__logout">
-          Logout
-        </button>
-      </div>
-    </nav>
+        <div className="navbar__right">
+          <Link to="/account" className="navbar__user navbar__user-link navbar__user-link--desktop">
+            {currentUser.email}
+          </Link>
+          <button onClick={logout} className="navbar__logout">
+            Logout
+          </button>
+          <button
+            className="navbar__hamburger"
+            onClick={() => setIsNavPanelOpen(true)}
+            aria-label="Open navigation menu"
+          >
+            <span className="navbar__hamburger-bar" />
+            <span className="navbar__hamburger-bar" />
+            <span className="navbar__hamburger-bar" />
+          </button>
+        </div>
+      </nav>
+
+      <NavPanel
+        isOpen={isNavPanelOpen}
+        onClose={() => setIsNavPanelOpen(false)}
+      />
+    </>
   );
 }