myron/kino-app
1
0
Fork 0
mirror of https://github.com/myronblair/kino-app synced 2026-07-28 13:33:49 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add mobile navigation menu

Browse Source 
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.
This commit is contained in:
Myron Blair
2026-07-27 19:24:19 -05:00
parent 119dd20743
commit 4397617cf1
1 changed files with 41 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Navbar.jsx
+41 -4
View File
@@ -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>
);
};