From f8f687af4eb298c07290dfbbd314394a0f8157b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Tue, 1 Sep 2026 19:23:38 +0200
Subject: [PATCH] Polish the mobile menu

- Header: replaces the plain "Menu" title with the brand mark
  (animated, matching the dashboard hero) + wordmark and a short
  description line
- Nav rows get icons and an active-state background/icon tint instead
  of reusing the desktop tab strip's underline
- Desktop tabs also gain matching icons
- Theme toggle and Log out move from the cramped mobile header into
  labeled rows at the bottom of the drawer; desktop keeps them in the
  header
- The header hamburger button is now a self-contained, controlled
  toggle whose bars morph into an X on open/close, sized to match the
  drawer's built-in close button

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 components/layout/NavBar.tsx | 142 +++++++++++++++++++++++++++++------
 1 file changed, 117 insertions(+), 25 deletions(-)

diff --git a/components/layout/NavBar.tsx b/components/layout/NavBar.tsx
index 86e2d2a..8763d3e 100644
--- a/components/layout/NavBar.tsx
+++ b/components/layout/NavBar.tsx
@@ -4,19 +4,19 @@ import { useState } from "react";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 import { useTheme } from "next-themes";
-import { Menu, Moon, Sun, LogOut } from "lucide-react";
+import { Moon, Sun, LogOut, Gauge, SlidersHorizontal, ListMusic, Bluetooth, BarChart3 } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
+import { Sheet, SheetContent, SheetDescription, SheetTitle } from "@/components/ui/sheet";
 import { ConnectionStatus } from "./ConnectionStatus";
 import { BrandMark } from "./BrandMark";
 import { cn } from "@/lib/utils";
 
 const LINKS = [
-  { href: "/", label: "Dashboard" },
-  { href: "/control", label: "Control" },
-  { href: "/sessions", label: "Sessions" },
-  { href: "/devices", label: "Devices" },
-  { href: "/stats", label: "Stats" },
+  { href: "/", label: "Dashboard", icon: Gauge },
+  { href: "/control", label: "Control", icon: SlidersHorizontal },
+  { href: "/sessions", label: "Sessions", icon: ListMusic },
+  { href: "/devices", label: "Devices", icon: Bluetooth },
+  { href: "/stats", label: "Stats", icon: BarChart3 },
 ];
 
 function isActive(pathname: string, href: string): boolean {
@@ -33,12 +33,13 @@ function NavLinks({ onNavigate }: { onNavigate?: () => void }) {
           href={link.href}
           onClick={onNavigate}
           className={cn(
-            "border-b-2 px-2.5 py-1.5 text-xs font-medium tracking-wide uppercase transition-colors",
+            "flex items-center gap-1.5 border-b-2 px-2.5 py-1.5 text-xs font-medium tracking-wide uppercase transition-colors",
             isActive(pathname, link.href)
               ? "border-primary text-foreground"
               : "border-transparent text-muted-foreground hover:text-foreground",
           )}
         >
+          <link.icon className="size-3.5" />
           {link.label}
         </Link>
       ))}
@@ -46,6 +47,60 @@ function NavLinks({ onNavigate }: { onNavigate?: () => void }) {
   );
 }
 
+/** Drawer rows for the mobile menu - icon + label, styled as tappable
+ * console rows rather than the desktop tab strip's underline treatment. */
+function MobileNavLinks({ onNavigate }: { onNavigate: () => void }) {
+  const pathname = usePathname();
+  return (
+    <>
+      {LINKS.map((link) => {
+        const active = isActive(pathname, link.href);
+        return (
+          <Link
+            key={link.href}
+            href={link.href}
+            onClick={onNavigate}
+            className={cn(
+              "flex items-center gap-3 rounded-lg px-3 py-3 text-sm font-medium transition-colors",
+              active ? "bg-accent text-foreground" : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
+            )}
+          >
+            <link.icon className={cn("size-4 shrink-0", active && "text-primary")} />
+            {link.label}
+          </Link>
+        );
+      })}
+    </>
+  );
+}
+
+/** Hamburger that morphs into an X - the top/bottom bars rotate into place
+ * and the middle bar collapses, rather than a straight icon swap. */
+function MenuToggleIcon({ open }: { open: boolean }) {
+  return (
+    <span className="relative flex size-4 shrink-0 flex-col items-center justify-center" aria-hidden>
+      <span
+        className={cn(
+          "absolute h-0.5 w-4 rounded-full bg-current transition-transform duration-300 ease-out motion-reduce:transition-none",
+          open ? "translate-y-0 rotate-45" : "-translate-y-[5px] rotate-0",
+        )}
+      />
+      <span
+        className={cn(
+          "absolute h-0.5 w-4 rounded-full bg-current transition-all duration-200 ease-out motion-reduce:transition-none",
+          open ? "scale-x-0 opacity-0" : "scale-x-100 opacity-100",
+        )}
+      />
+      <span
+        className={cn(
+          "absolute h-0.5 w-4 rounded-full bg-current transition-transform duration-300 ease-out motion-reduce:transition-none",
+          open ? "translate-y-0 -rotate-45" : "translate-y-[5px] rotate-0",
+        )}
+      />
+    </span>
+  );
+}
+
 export function NavBar() {
   const { theme, setTheme } = useTheme();
   const router = useRouter();
@@ -71,30 +126,67 @@ export function NavBar() {
 
         <div className="ml-auto flex items-center gap-2">
           <ConnectionStatus />
+
+          <div className="hidden items-center gap-2 md:flex">
+            <Button
+              variant="ghost"
+              size="icon"
+              aria-label="Toggle theme"
+              onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+            >
+              <Sun className="hidden size-4 dark:block" />
+              <Moon className="block size-4 dark:hidden" />
+            </Button>
+            <Button variant="ghost" size="icon" aria-label="Log out" onClick={handleLogout}>
+              <LogOut className="size-4" />
+            </Button>
+          </div>
+
           <Button
             variant="ghost"
-            size="icon"
-            aria-label="Toggle theme"
-            onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+            size="icon-sm"
+            className="md:hidden"
+            aria-label={menuOpen ? "Close menu" : "Open menu"}
+            onClick={() => setMenuOpen((open) => !open)}
           >
-            <Sun className="hidden size-4 dark:block" />
-            <Moon className="block size-4 dark:hidden" />
-          </Button>
-          <Button variant="ghost" size="icon" aria-label="Log out" onClick={handleLogout}>
-            <LogOut className="size-4" />
+            <MenuToggleIcon open={menuOpen} />
           </Button>
 
           <Sheet open={menuOpen} onOpenChange={setMenuOpen}>
-            <SheetTrigger asChild>
-              <Button variant="ghost" size="icon" className="md:hidden" aria-label="Open menu">
-                <Menu className="size-4" />
-              </Button>
-            </SheetTrigger>
-            <SheetContent side="right" className="w-64">
-              <SheetTitle className="px-4 pt-4">Menu</SheetTitle>
-              <nav className="flex flex-col gap-1 p-4">
-                <NavLinks onNavigate={() => setMenuOpen(false)} />
+            <SheetContent side="right" className="w-72 gap-0 p-0">
+              <div className="flex items-center gap-2 px-4 pt-4 pb-3">
+                <BrandMark size={24} animated />
+                <SheetTitle className="font-heading text-lg font-semibold">Sexy</SheetTitle>
+              </div>
+              <SheetDescription className="px-4 pb-3 text-xs">
+                Jump to another page or manage your session.
+              </SheetDescription>
+              <div className="bp-hairline" />
+
+              <nav className="flex flex-1 flex-col gap-1 p-3">
+                <MobileNavLinks onNavigate={() => setMenuOpen(false)} />
               </nav>
+
+              <div className="bp-hairline" />
+              <div className="flex flex-col gap-1 p-3">
+                <button
+                  type="button"
+                  onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+                  className="flex items-center gap-3 rounded-lg px-3 py-3 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground"
+                >
+                  <Sun className="hidden size-4 dark:block" />
+                  <Moon className="block size-4 dark:hidden" />
+                  {theme === "dark" ? "Switch to light mode" : "Switch to dark mode"}
+                </button>
+                <button
+                  type="button"
+                  onClick={() => void handleLogout()}
+                  className="flex items-center gap-3 rounded-lg px-3 py-3 text-sm font-medium text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive"
+                >
+                  <LogOut className="size-4" />
+                  Log out
+                </button>
+              </div>
             </SheetContent>
           </Sheet>
         </div>