feat(web): offcanvas sidebar with hamburger below lg

web/components/Sidebar.tsx

@@ -2,6 +2,7 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { useEffect, useRef } from "react";
 import { clsx } from "clsx";
 import { useAuth } from "@/components/AuthProvider";
 import { auth } from "@/lib/api";
@@ -132,7 +133,8 @@ const navItems: NavItem[] = [
     { href: "/settings", label: "Settings", icon: <SettingsIcon />, adminOnly: true },
 ];
 
-export function Sidebar() {
+/** Shared by the permanent aside and the offcanvas drawer — one copy of the nav. */
+export function SidebarContent({ onNavigate }: { onNavigate?: () => void }) {
     const pathname = usePathname();
     const { user, instance, isAdmin } = useAuth();
 
@@ -152,8 +154,8 @@ export function Sidebar() {
     }
 
     return (
-        <aside className="flex h-screen w-60 flex-col border-r border-border bg-surface">
-            <div className="flex h-16 items-center gap-3 border-b border-border px-5">
+        <>
+            <div className="flex h-16 shrink-0 items-center gap-3 border-b border-border px-5">
                 <Logo className="h-8 w-8 text-logo" />
                 <div className="min-w-0">
                     <span className="block text-base font-extrabold leading-tight tracking-[-0.035em] text-text-primary">Vantage</span>
@@ -171,6 +173,7 @@ export function Sidebar() {
                             <li key={item.href}>
                                 <Link
                                     href={item.href}
+                                    onClick={onNavigate}
                                     // The active marker is an accent bar, the same device
                                     // site/ uses to mark the chosen plan. A filled pill
                                     // reads as a button you can press again.
@@ -190,7 +193,7 @@ export function Sidebar() {
                 </ul>
             </nav>
 
-            <div className="border-t border-border px-4 py-3">
+            <div className="shrink-0 border-t border-border px-4 py-3">
                 {user && (
                     <div className="mb-3">
                         <p className="truncate text-sm font-medium text-text-primary">{user.name || user.email}</p>
@@ -209,6 +212,74 @@ export function Sidebar() {
                     )}
                 </div>
             </div>
+        </>
+    );
+}
+
+/** The permanent sidebar. Below lg the drawer takes over. */
+export function Sidebar() {
+    return (
+        <aside className="hidden h-screen w-60 shrink-0 flex-col border-r border-border bg-surface lg:flex">
+            <SidebarContent />
         </aside>
     );
 }
+
+/**
+ * The offcanvas below lg. Always mounted so the slide runs in both directions;
+ * closed it is inert (invisible + pointer-events-none) rather than unmounted.
+ */
+export function SidebarDrawer({ open, onClose }: { open: boolean; onClose: () => void }) {
+    const panelRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (!open) return;
+
+        const onKey = (e: KeyboardEvent) => {
+            if (e.key === "Escape") onClose();
+        };
+        window.addEventListener("keydown", onKey);
+
+        const previousOverflow = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+
+        panelRef.current?.focus();
+
+        return () => {
+            window.removeEventListener("keydown", onKey);
+            document.body.style.overflow = previousOverflow;
+        };
+    }, [open, onClose]);
+
+    return (
+        <div
+            className={clsx(
+                "fixed inset-0 z-50 lg:hidden",
+                open ? "visible" : "invisible pointer-events-none",
+            )}
+        >
+            <div
+                aria-hidden="true"
+                onClick={onClose}
+                className={clsx(
+                    "absolute inset-0 bg-black/60 transition-opacity duration-200",
+                    open ? "opacity-100" : "opacity-0",
+                )}
+            />
+            <div
+                ref={panelRef}
+                id="app-sidebar-drawer"
+                role="dialog"
+                aria-modal="true"
+                aria-label="Navigation"
+                tabIndex={-1}
+                className={clsx(
+                    "absolute inset-y-0 left-0 flex w-72 max-w-[85%] flex-col border-r border-border bg-surface outline-none transition-transform duration-200 ease-out",
+                    open ? "translate-x-0" : "-translate-x-full",
+                )}
+            >
+                <SidebarContent onNavigate={onClose} />
+            </div>
+        </div>
+    );
+}