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

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

src/app/admin/layout.tsx

@@ -42,9 +42,7 @@ export default async function AdminLayout({
 
 	return (
 		<>
-			{csrfToken ? (
+			{csrfToken ? <meta name="csrf-token" content={csrfToken} /> : null}
-				<meta name="csrf-token" content={csrfToken} />
-			) : null}
 			<AdminMobileWrapper sidebar={<Sidebar staff={staff} />}>
 				<div
 					data-admin
@@ -72,9 +70,9 @@ async function Sidebar({
 	return (
 		<aside
 			data-admin
-			className="max-lg:static sticky top-0 self-start h-full lg:h-screen overflow-y-auto bg-[var(--admin-sidebar-background)] text-[var(--admin-sidebar-text-readable)] shadow-xl flex flex-col"
+			className="max-lg:static sticky top-0 flex h-full max-h-screen min-h-0 w-full flex-col self-start overflow-hidden bg-[var(--admin-sidebar-background)] text-[var(--admin-sidebar-text-readable)] shadow-xl lg:h-screen"
 		>
-			<div className="flex items-center gap-3 px-4 py-5 border-b border-[var(--admin-border)]">
+			<div className="flex shrink-0 items-center gap-3 border-b border-[var(--admin-border)] px-4 py-5">
 				<span
 					className="flex-none w-10 h-10 rounded-xl grid place-items-center font-extrabold text-base text-[var(--admin-accent-foreground)] bg-[var(--admin-accent)] shadow-lg shadow-[var(--admin-accent)]/20"
 					aria-hidden
@@ -97,7 +95,7 @@ async function Sidebar({
 
 			<AdminSidebarNav />
 
-			<div className="px-3 py-3 border-t border-[var(--admin-border)]">
+			<div className="shrink-0 border-t border-[var(--admin-border)] px-3 py-3">
 				<Link
 					href="/"
 					className="flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-[var(--admin-sidebar-muted-readable)] text-xs font-medium hover:text-[var(--admin-sidebar-text-readable)] hover:bg-[var(--admin-accent)]/10 transition-all duration-150 no-underline"
@@ -109,4 +107,3 @@ async function Sidebar({
 		</aside>
 	);
 }
-

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(
+function itemIsActive(pathname: string, item: AdminNavItem): boolean {
-	pathname: string,
+	if (
-	item: AdminNavItem,
+		item.matchExcludePrefixes?.some(
-): 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) =>
+		const activeKeys = groups
-			groupHasActive(pathname, g.items),
+			.filter((g) => groupHasActive(pathname, g.items))
-		).map((g) => g.labelKey);
+			.map((g) => g.labelKey);
 		if (activeKeys.length === 0) return;
 		setCollapsed((prev) => {
 			let changed = false;
@@ -73,31 +83,93 @@ export function AdminSidebarNav() {
 				}
 			}
 			if (!changed) return prev;
-			try {
+			persistCollapsed(next);
-				localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
-			} catch {
-				/* ignore quota */
-			}
 			return next;
 		});
-	}, [pathname, hydrated]);
+	}, [pathname, hydrated, groups]);
 
 	const toggle = useCallback((labelKey: string) => {
 		setCollapsed((prev) => {
 			const next = { ...prev, [labelKey]: !prev[labelKey] };
-			try {
+			persistCollapsed(next);
-				localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
-			} catch {
-				/* ignore quota */
-			}
 			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")}>
+		<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>
+
+			<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]);
@@ -107,7 +179,7 @@ export function AdminSidebarNav() {
 						<div
 							key={group.labelKey}
 							className={
-							gi > 0 ? "mt-3 pt-3 border-t border-[var(--admin-border)]" : ""
+								gi > 0 ? "mt-3 border-t border-[var(--admin-border)] pt-3" : ""
 							}
 						>
 							<button
@@ -125,7 +197,9 @@ export function AdminSidebarNav() {
 								)}
 							>
 								<GroupIcon size={14} className="shrink-0" />
-							<span className="min-w-0 flex-1 truncate">{t(group.labelKey)}</span>
+								<span className="min-w-0 flex-1 truncate">
+									{t(group.labelKey)}
+								</span>
 								<ChevronDown
 									size={14}
 									className={cn(
@@ -158,6 +232,7 @@ export function AdminSidebarNav() {
 						</div>
 					);
 				})}
+			</div>
 		</nav>
 	);
 }

src/messages/en.json

@@ -1080,6 +1080,8 @@
 				"import": "Import",
 				"settings": "Settings",
 				"backToSite": "Back to site",
+				"expandAll": "Expand all",
+				"collapseAll": "Collapse all",
 				"housekeeping": "Housekeeping",
 				"hotelManagementPanel": "Hotel management panel",
 				"rankLabel": "Rank {rank}",

src/messages/it.json

@@ -1010,6 +1010,8 @@
 				"import": "Importa",
 				"settings": "Impostazioni",
 				"backToSite": "Torna al sito",
+				"expandAll": "Apri tutte",
+				"collapseAll": "Chiudi tutte",
 				"hotelManagementPanel": "Pannello di gestione hotel",
 				"rankLabel": "Grado {rank}",
 				"hubNewsMedia": "Notizie e media",

src/messages/nl.json

@@ -1054,6 +1054,8 @@
 				"import": "Importeren",
 				"settings": "Instellingen",
 				"backToSite": "Terug naar site",
+				"expandAll": "Alles openen",
+				"collapseAll": "Alles sluiten",
 				"housekeeping": "Housekeeping",
 				"hotelManagementPanel": "Hotelbeheerpaneel",
 				"rankLabel": "Rang {rank}",