feat(admin): expand/collapse all sidebar groups with scrollable nav

Co-authored-by: Cursor <[email protected]>

src/components/admin/admin-mobile-wrapper.tsx

@@ -84,7 +84,7 @@ export function AdminMobileWrapper({
 
 					{/* Sidebar */}
 					<div
-						className={`fixed inset-y-0 left-0 z-50 w-[260px] lg:!relative lg:!translate-x-0 lg:!min-h-screen ${
+						className={`fixed inset-y-0 left-0 z-50 flex h-full w-[260px] flex-col overflow-hidden lg:!relative lg:!min-h-screen lg:!translate-x-0 ${
 							open ? "translate-x-0" : "-translate-x-full"
 						}`}
 						style={{ transition: "transform 300ms ease-in-out" }}

src/components/admin/admin-sidebar-nav.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ChevronDown } from "lucide-react";
+import { ChevronDown, ChevronsDownUp, ChevronsUpDown } from "lucide-react";
 import { usePathname } from "next/navigation";
 import { useTranslations } from "next-intl";
 import { useCallback, useEffect, useMemo, useState } from "react";
@@ -10,13 +10,12 @@ import { cn } from "@/lib/utils";
 
 const STORAGE_KEY = "admin-nav-collapsed";
 
-function itemIsActive(
-	pathname: string,
-	item: AdminNavItem,
-): boolean {
-	if (item.matchExcludePrefixes?.some(
-		(p) => pathname === p || pathname.startsWith(`${p}/`),
-	)) {
+function itemIsActive(pathname: string, item: AdminNavItem): boolean {
+	if (
+		item.matchExcludePrefixes?.some(
+			(p) => pathname === p || pathname.startsWith(`${p}/`),
+		)
+	) {
 		return false;
 	}
 	if (item.href === "/admin") return pathname === "/admin";
@@ -45,12 +44,23 @@ function readCollapsed(): Record<string, boolean> {
 	}
 }
 
+function persistCollapsed(next: Record<string, boolean>) {
+	try {
+		localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
+	} catch {
+		/* ignore quota */
+	}
+}
+
 export function AdminSidebarNav() {
 	const t = useTranslations("pages.admin.nav");
 	const pathname = usePathname() ?? "";
 	const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
 	const [hydrated, setHydrated] = useState(false);
 
+	const groups = useMemo(() => ADMIN_NAV_GROUPS, []);
+	const allKeys = useMemo(() => groups.map((g) => g.labelKey), [groups]);
+
 	useEffect(() => {
 		setCollapsed(readCollapsed());
 		setHydrated(true);
@@ -59,9 +69,9 @@ export function AdminSidebarNav() {
 	// Keep the group that contains the current page open.
 	useEffect(() => {
 		if (!hydrated) return;
-		const activeKeys = ADMIN_NAV_GROUPS.filter((g) =>
-			groupHasActive(pathname, g.items),
-		).map((g) => g.labelKey);
+		const activeKeys = groups
+			.filter((g) => groupHasActive(pathname, g.items))
+			.map((g) => g.labelKey);
 		if (activeKeys.length === 0) return;
 		setCollapsed((prev) => {
 			let changed = false;
@@ -73,91 +83,156 @@ export function AdminSidebarNav() {
 				}
 			}
 			if (!changed) return prev;
-			try {
-				localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
-			} catch {
-				/* ignore quota */
-			}
+			persistCollapsed(next);
 			return next;
 		});
-	}, [pathname, hydrated]);
+	}, [pathname, hydrated, groups]);
 
 	const toggle = useCallback((labelKey: string) => {
 		setCollapsed((prev) => {
 			const next = { ...prev, [labelKey]: !prev[labelKey] };
-			try {
-				localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
-			} catch {
-				/* ignore quota */
-			}
+			persistCollapsed(next);
 			return next;
 		});
 	}, []);
 
-	const groups = useMemo(() => ADMIN_NAV_GROUPS, []);
+	const expandAll = useCallback(() => {
+		const next: Record<string, boolean> = {};
+		for (const key of allKeys) next[key] = false;
+		persistCollapsed(next);
+		setCollapsed(next);
+	}, [allKeys]);
+
+	const collapseAll = useCallback(() => {
+		const next: Record<string, boolean> = {};
+		for (const key of allKeys) next[key] = true;
+		// Keep the active route's group open so you never lose context.
+		for (const g of groups) {
+			if (groupHasActive(pathname, g.items)) next[g.labelKey] = false;
+		}
+		persistCollapsed(next);
+		setCollapsed(next);
+	}, [allKeys, groups, pathname]);
+
+	const allExpanded = hydrated && allKeys.every((k) => !collapsed[k]);
+	const canCollapseMore =
+		hydrated &&
+		allKeys.some((k) => {
+			const g = groups.find((x) => x.labelKey === k);
+			if (g && groupHasActive(pathname, g.items)) return false;
+			return !collapsed[k];
+		});
 
 	return (
-		<nav className="flex-1 overflow-y-auto px-3 py-4" aria-label={t("overview")}>
-			{groups.map((group, gi) => {
-				const GroupIcon = group.icon;
-				const isCollapsed = Boolean(collapsed[group.labelKey]);
-				const panelId = `admin-nav-${group.labelKey}`;
+		<nav
+			className="flex min-h-0 flex-1 flex-col overflow-hidden"
+			aria-label={t("overview")}
+		>
+			<div className="flex shrink-0 items-center gap-1 border-b border-[var(--admin-border)] px-3 py-2">
+				<button
+					type="button"
+					onClick={expandAll}
+					disabled={allExpanded}
+					title={t("expandAll")}
+					aria-label={t("expandAll")}
+					className={cn(
+						"inline-flex flex-1 items-center justify-center gap-1 rounded-md px-2 py-1.5",
+						"text-[0.65rem] font-bold uppercase tracking-wide",
+						"text-[var(--admin-sidebar-muted-readable)]",
+						"hover:bg-[var(--admin-accent)]/10 hover:text-[var(--admin-sidebar-text-readable)]",
+						"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--admin-accent)]",
+						"disabled:pointer-events-none disabled:opacity-40",
+						"transition-colors",
+					)}
+				>
+					<ChevronsUpDown size={14} aria-hidden />
+					<span className="truncate">{t("expandAll")}</span>
+				</button>
+				<button
+					type="button"
+					onClick={collapseAll}
+					disabled={!canCollapseMore}
+					title={t("collapseAll")}
+					aria-label={t("collapseAll")}
+					className={cn(
+						"inline-flex flex-1 items-center justify-center gap-1 rounded-md px-2 py-1.5",
+						"text-[0.65rem] font-bold uppercase tracking-wide",
+						"text-[var(--admin-sidebar-muted-readable)]",
+						"hover:bg-[var(--admin-accent)]/10 hover:text-[var(--admin-sidebar-text-readable)]",
+						"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--admin-accent)]",
+						"disabled:pointer-events-none disabled:opacity-40",
+						"transition-colors",
+					)}
+				>
+					<ChevronsDownUp size={14} aria-hidden />
+					<span className="truncate">{t("collapseAll")}</span>
+				</button>
+			</div>
 
-				return (
-					<div
-						key={group.labelKey}
-						className={
-							gi > 0 ? "mt-3 pt-3 border-t border-[var(--admin-border)]" : ""
-						}
-					>
-						<button
-							type="button"
-							onClick={() => toggle(group.labelKey)}
-							aria-expanded={!isCollapsed}
-							aria-controls={panelId}
-							className={cn(
-								"flex w-full items-center gap-1.5 rounded-lg px-2 py-1.5 text-left",
-								"text-[0.65rem] font-extrabold uppercase tracking-[0.14em]",
-								"text-[var(--admin-sidebar-text-readable)] opacity-70",
-								"hover:opacity-100 hover:bg-[var(--admin-accent)]/10",
-								"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--admin-accent)]",
-								"transition-colors",
-							)}
-						>
-							<GroupIcon size={14} className="shrink-0" />
-							<span className="min-w-0 flex-1 truncate">{t(group.labelKey)}</span>
-							<ChevronDown
-								size={14}
-								className={cn(
-									"shrink-0 opacity-80 transition-transform duration-200",
-									isCollapsed && "-rotate-90",
-								)}
-								aria-hidden
-							/>
-						</button>
+			<div className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-3 py-3">
+				{groups.map((group, gi) => {
+					const GroupIcon = group.icon;
+					const isCollapsed = Boolean(collapsed[group.labelKey]);
+					const panelId = `admin-nav-${group.labelKey}`;
+
+					return (
 						<div
-							id={panelId}
-							hidden={isCollapsed}
-							className="mt-1 space-y-0.5"
+							key={group.labelKey}
+							className={
+								gi > 0 ? "mt-3 border-t border-[var(--admin-border)] pt-3" : ""
+							}
 						>
-							{group.items.map((item) => {
-								const ItemIcon = item.icon;
-								return (
-									<AdminNavLink
-										key={`${group.labelKey}-${item.href}`}
-										href={item.href}
-										matchPrefixes={item.matchPrefixes}
-										matchExcludePrefixes={item.matchExcludePrefixes}
-										icon={<ItemIcon size={16} />}
-									>
-										{t(item.labelKey)}
-									</AdminNavLink>
-								);
-							})}
+							<button
+								type="button"
+								onClick={() => toggle(group.labelKey)}
+								aria-expanded={!isCollapsed}
+								aria-controls={panelId}
+								className={cn(
+									"flex w-full items-center gap-1.5 rounded-lg px-2 py-1.5 text-left",
+									"text-[0.65rem] font-extrabold uppercase tracking-[0.14em]",
+									"text-[var(--admin-sidebar-text-readable)] opacity-70",
+									"hover:opacity-100 hover:bg-[var(--admin-accent)]/10",
+									"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--admin-accent)]",
+									"transition-colors",
+								)}
+							>
+								<GroupIcon size={14} className="shrink-0" />
+								<span className="min-w-0 flex-1 truncate">
+									{t(group.labelKey)}
+								</span>
+								<ChevronDown
+									size={14}
+									className={cn(
+										"shrink-0 opacity-80 transition-transform duration-200",
+										isCollapsed && "-rotate-90",
+									)}
+									aria-hidden
+								/>
+							</button>
+							<div
+								id={panelId}
+								hidden={isCollapsed}
+								className="mt-1 space-y-0.5"
+							>
+								{group.items.map((item) => {
+									const ItemIcon = item.icon;
+									return (
+										<AdminNavLink
+											key={`${group.labelKey}-${item.href}`}
+											href={item.href}
+											matchPrefixes={item.matchPrefixes}
+											matchExcludePrefixes={item.matchExcludePrefixes}
+											icon={<ItemIcon size={16} />}
+										>
+											{t(item.labelKey)}
+										</AdminNavLink>
+									);
+								})}
+							</div>
 						</div>
-					</div>
-				);
-			})}
+					);
+				})}
+			</div>
 		</nav>
 	);
 }