mobile responsive

app/(dashboard)/layout.tsx

@@ -3,73 +3,12 @@
 import { useEffect, useState } from "react";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
-import {
-  ClipboardCheck,
-  Flag,
-  ShieldCheck,
-  Gift,
-  Megaphone,
-  Quote,
-  FolderClosed,
-  LayoutDashboard,
-  LayoutGrid,
-  Link2,
-  LogOut,
-  MessageSquare,
-  Users,
-} from "lucide-react";
-import { api, staff, MANAGE_STAFF, type Me, type StaffMe } from "@/lib/api";
+import { Menu } from "lucide-react";
+import { api, staff, type Me, type StaffMe } from "@/lib/api";
 import { RequirePermission, StaffProvider } from "@/components/staff-context";
-import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { ConfirmProvider } from "@/components/confirm";
-
-// Each entry names the permission that unlocks it, so the sidebar only shows
-// what the signed-in role can actually use.
-const NAV = [
-  { href: "/", label: "Overview", icon: LayoutDashboard, perm: "stats:read" },
-  { href: "/users", label: "Users", icon: Users, perm: "users:read" },
-  { href: "/posts", label: "Posts", icon: LayoutGrid, perm: "posts:moderate" },
-  {
-    href: "/collections",
-    label: "Collections",
-    icon: FolderClosed,
-    perm: "collections:read",
-  },
-  {
-    href: "/short-urls",
-    label: "Short URLs",
-    icon: Link2,
-    perm: "short_urls:read",
-  },
-  {
-    href: "/feedback",
-    label: "Feedback",
-    icon: MessageSquare,
-    perm: "feedback:read",
-  },
-  { href: "/reports", label: "Reports", icon: Flag, perm: "reports:read" },
-  {
-    href: "/broadcasts",
-    label: "Announcements",
-    icon: Megaphone,
-    perm: "broadcasts:read",
-  },
-  { href: "/reward-gifts", label: "Gifts", icon: Gift, perm: "rewards:read" },
-  { href: "/vani", label: "Vāṇī of the Day", icon: Quote, perm: "vani:read" },
-  {
-    href: "/quizzes",
-    label: "Quizzes",
-    icon: ClipboardCheck,
-    perm: "quizzes:read",
-  },
-  {
-    href: "/staff",
-    label: "Staff & roles",
-    icon: ShieldCheck,
-    perm: MANAGE_STAFF,
-  },
-];
+import { NAV, Sidebar } from "./sidebar";
 
 export default function DashboardLayout({
   children,
@@ -81,6 +20,8 @@ export default function DashboardLayout({
   const [me, setMe] = useState<Me | null>(null);
   const [staffMe, setStaffMe] = useState<StaffMe | null>(null);
   const [checked, setChecked] = useState(false);
+  // Navigation drawer, below lg only.
+  const [navOpen, setNavOpen] = useState(false);
 
   // Staff gate: only an account holding an admin role, and not blocked from
   // the panel, may see the dashboard. /admin/me answers both at once — it 403s
@@ -133,84 +74,59 @@ export default function DashboardLayout({
     );
   }
 
+  const section =
+    NAV.find(
+      (n) =>
+        n.href !== "/" &&
+        (pathname === n.href || pathname.startsWith(n.href + "/")),
+    ) ?? (pathname === "/" ? NAV[0] : undefined);
+
   return (
     <div className="flex min-h-screen">
-      <aside className="flex w-60 shrink-0 flex-col border-r border-border bg-card">
-        <div className="px-5 py-5">
-          <p className="text-xs uppercase tracking-[0.2em] text-primary">
-            Prabhupāda Says
-          </p>
-          <p className="mt-0.5 text-sm font-semibold text-foreground">Admin</p>
-        </div>
-        <nav className="flex-1 space-y-1 px-3">
-          {NAV.filter((n) => staffMe.permissions.includes(n.perm)).map(
-            ({ href, label, icon: Icon }) => {
-              const active =
-                pathname === href || pathname.startsWith(href + "/");
-              return (
-                <Link
-                  key={href}
-                  href={href}
-                  className={cn(
-                    "flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors",
-                    active
-                      ? "bg-accent text-accent-foreground font-medium"
-                      : "text-muted-foreground hover:bg-muted hover:text-foreground",
-                  )}
-                >
-                  <Icon className="size-4" />
-                  {label}
-                </Link>
-              );
-            },
-          )}
-        </nav>
-        <div className="border-t border-border px-3 py-3">
-          <div className="px-3 pb-2 text-xs text-muted-foreground">
-            <p className="truncate font-medium text-foreground">{me.name}</p>
-            <p className="truncate">@{me.handle}</p>
-            <p className="mt-1 inline-block rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
-              {staffMe.role_name}
-            </p>
-          </div>
+      <Sidebar
+        me={me}
+        staffMe={staffMe}
+        pathname={pathname}
+        open={navOpen}
+        onClose={() => setNavOpen(false)}
+        onSignOut={signOut}
+      />
+
+      <div className="flex min-w-0 flex-1 flex-col">
+        {/* Below lg: a top bar with the menu button and where you are. */}
+        <header className="sticky top-0 z-30 flex items-center gap-2 border-b border-border bg-card/95 px-2 py-2 backdrop-blur lg:hidden">
           <Button
             variant="ghost"
             size="sm"
-            onClick={signOut}
-            className="w-full justify-start text-muted-foreground"
+            onClick={() => setNavOpen(true)}
+            aria-label="Open menu"
+            className="size-10 px-0"
           >
-            <LogOut className="size-4" />
-            Sign out
+            <Menu className="size-5" />
           </Button>
-        </div>
-      </aside>
+          <p className="min-w-0 truncate text-sm font-semibold text-foreground">
+            {section?.label ?? "Admin"}
+          </p>
+        </header>
 
-      <main className="flex-1 overflow-x-hidden px-6 py-6 lg:px-10">
-        <div className="mx-auto max-w-6xl">
-          <StaffProvider value={staffMe}>
-            <ConfirmProvider>
-              {/* The section's own permission, so a URL typed straight in
+        <main className="min-w-0 flex-1 px-4 py-5 sm:px-6 sm:py-6 lg:px-10">
+          <div className="mx-auto max-w-6xl">
+            <StaffProvider value={staffMe}>
+              <ConfirmProvider>
+                {/* The section's own permission, so a URL typed straight in
                   explains itself instead of failing call by call. */}
-              {(() => {
-                const section =
-                  NAV.find(
-                    (n) =>
-                      n.href !== "/" &&
-                      (pathname === n.href ||
-                        pathname.startsWith(n.href + "/")),
-                  ) ?? (pathname === "/" ? NAV[0] : undefined);
-                return section ? (
+                {section ? (
                   <RequirePermission perm={section.perm}>
                     {children}
                   </RequirePermission>
                 ) : (
                   children
-                );
-              })()}
-            </ConfirmProvider>
-          </StaffProvider>
-        </div>
-      </main>
+                )}
+              </ConfirmProvider>
+            </StaffProvider>
+          </div>
+        </main>
+      </div>
     </div>
   );
 }