From 4397617cf106cecb3c50d89ec4f867d02bf5e251 Mon Sep 17 00:00:00 2001
From: Myron Blair <myronblair@gmail.com>
Date: Mon, 27 Jul 2026 19:24:19 -0500
Subject: [PATCH] Add mobile navigation menu
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Nav links (Library/Series/Shelf/Music/Wishlist/Admin) were hidden below the
md breakpoint with no mobile alternative — there was no way to navigate the
app at all on a phone besides the logo link and search/settings icons.
Adds a hamburger toggle and slide-down menu with the same links plus
Upload/Settings/Sign Out, closing automatically on navigation.
---
 frontend/src/components/Navbar.jsx | 45 +++++++++++++++++++++++++++---
 1 file changed, 41 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx
index 9934ff6..a53b014 100644
--- a/frontend/src/components/Navbar.jsx
+++ b/frontend/src/components/Navbar.jsx
@@ -1,7 +1,7 @@
-import { Link, NavLink, useNavigate } from "react-router-dom";
+import { Link, NavLink, useNavigate, useLocation } from "react-router-dom";
 import { useAuth } from "../lib/auth";
 import { useProfile } from "../lib/profile";
-import { Search, LogOut, Upload, Settings as SettingsIcon } from "lucide-react";
+import { Search, LogOut, Upload, Settings as SettingsIcon, Menu, X } from "lucide-react";
 import { useState, useEffect } from "react";
 import api from "../lib/api";
 
@@ -9,8 +9,10 @@ export const Navbar = () => {
   const { user, logout } = useAuth();
   const { active } = useProfile();
   const nav = useNavigate();
+  const location = useLocation();
   const [scrolled, setScrolled] = useState(false);
   const [version, setVersion] = useState("");
+  const [mobileOpen, setMobileOpen] = useState(false);
 
   useEffect(() => {
     const onScroll = () => setScrolled(window.scrollY > 20);
@@ -22,11 +24,17 @@ export const Navbar = () => {
     api.get("/version").then(({ data }) => setVersion(data.version)).catch(() => {});
   }, []);
 
+  // Close the mobile menu on navigation so it never lingers open over the next page.
+  useEffect(() => { setMobileOpen(false); }, [location.pathname]);
+
   const linkClass = ({ isActive }) =>
     `text-sm tracking-wide transition-colors duration-300 ${isActive ? "text-white" : "text-[#8A8A8A] hover:text-white"}`;
 
+  const mobileLinkClass = ({ isActive }) =>
+    `block py-3 text-base tracking-wide transition-colors duration-300 ${isActive ? "text-white" : "text-[#8A8A8A]"}`;
+
   return (
-    <header className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${scrolled ? "glass border-b" : ""}`} data-testid="main-navbar">
+    <header className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${scrolled || mobileOpen ? "glass border-b" : ""}`} data-testid="main-navbar">
       <div className="px-6 md:px-12 py-4 flex items-center justify-between">
         <div className="flex items-center gap-10">
           <Link to="/browse" className="flex items-center gap-2" data-testid="nav-logo">
@@ -68,15 +76,44 @@ export const Navbar = () => {
                   </div>
                 </div>
               )}
-              <button onClick={() => { logout(); nav("/login"); }} className="text-[#8A8A8A] hover:text-white transition-colors duration-300" data-testid="nav-logout-button" aria-label="Logout">
+              <button onClick={() => { logout(); nav("/login"); }} className="hidden md:block text-[#8A8A8A] hover:text-white transition-colors duration-300" data-testid="nav-logout-button" aria-label="Logout">
                 <LogOut size={16} strokeWidth={1.5} />
               </button>
             </div>
+            <button
+              onClick={() => setMobileOpen((v) => !v)}
+              className="md:hidden text-white -mr-2 p-2"
+              data-testid="nav-mobile-toggle"
+              aria-label={mobileOpen ? "Close menu" : "Open menu"}
+              aria-expanded={mobileOpen}
+            >
+              {mobileOpen ? <X size={22} strokeWidth={1.5} /> : <Menu size={22} strokeWidth={1.5} />}
+            </button>
           </div>
         ) : (
           <Link to="/login" className="text-sm tracking-wide bg-[#D9381E] hover:bg-[#ED4B32] text-white px-5 py-2 transition-colors duration-300" data-testid="nav-sign-in">Sign in</Link>
         )}
       </div>
+
+      {user && mobileOpen && (
+        <nav className="md:hidden glass border-t border-[#222] px-6 pb-6" data-testid="nav-mobile-menu">
+          <NavLink to="/browse" className={mobileLinkClass} data-testid="nav-mobile-browse">Library</NavLink>
+          <NavLink to="/shows" className={mobileLinkClass} data-testid="nav-mobile-shows">Series</NavLink>
+          <NavLink to="/my-list" className={mobileLinkClass} data-testid="nav-mobile-my-list">Shelf</NavLink>
+          <NavLink to="/music" className={mobileLinkClass} data-testid="nav-mobile-music">Music</NavLink>
+          <NavLink to="/requests" className={mobileLinkClass} data-testid="nav-mobile-requests">Wishlist</NavLink>
+          {user.is_admin && <NavLink to="/admin" className={mobileLinkClass} data-testid="nav-mobile-admin">Admin</NavLink>}
+          <div className="mt-2 pt-3 border-t border-[#222] flex flex-col gap-1">
+            {user.is_admin && (
+              <NavLink to="/admin/upload" className={mobileLinkClass} data-testid="nav-mobile-upload">Upload</NavLink>
+            )}
+            <NavLink to="/settings" className={mobileLinkClass} data-testid="nav-mobile-settings">Settings</NavLink>
+            <button onClick={() => { logout(); nav("/login"); }} className="text-left py-3 text-base tracking-wide text-[#8A8A8A]" data-testid="nav-mobile-logout">
+              Sign Out
+            </button>
+          </div>
+        </nav>
+      )}
     </header>
   );
 };