265 lines
7.8 KiB
TypeScript
265 lines
7.8 KiB
TypeScript
"use client";
|
|
|
|
import { ChevronDown, ChevronsDownUp, ChevronsUpDown } from "lucide-react";
|
|
import { usePathname } from "next/navigation";
|
|
import { useTranslations } from "next-intl";
|
|
import { useCallback, useEffect, useMemo, useState } from "react";
|
|
import { AdminNavLink } from "@/components/admin/admin-nav-link";
|
|
import {
|
|
ADMIN_NAV_GROUPS,
|
|
type AdminNavItem,
|
|
navItemIsAllowed,
|
|
} from "@/lib/admin-nav";
|
|
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}/`),
|
|
)
|
|
) {
|
|
return false;
|
|
}
|
|
if (item.href === "/admin") return pathname === "/admin";
|
|
if (item.matchPrefixes?.length) {
|
|
return item.matchPrefixes.some(
|
|
(p) => pathname === p || pathname.startsWith(`${p}/`),
|
|
);
|
|
}
|
|
return pathname === item.href || pathname.startsWith(`${item.href}/`);
|
|
}
|
|
|
|
function groupHasActive(pathname: string, items: AdminNavItem[]): boolean {
|
|
return items.some((item) => itemIsActive(pathname, item));
|
|
}
|
|
|
|
function readCollapsed(): Record<string, boolean> {
|
|
if (typeof window === "undefined") return {};
|
|
try {
|
|
const raw = localStorage.getItem(STORAGE_KEY);
|
|
if (!raw) return {};
|
|
const parsed = JSON.parse(raw) as unknown;
|
|
if (!parsed || typeof parsed !== "object") return {};
|
|
return parsed as Record<string, boolean>;
|
|
} catch {
|
|
return {};
|
|
}
|
|
}
|
|
|
|
function persistCollapsed(next: Record<string, boolean>) {
|
|
try {
|
|
localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
|
|
} catch {
|
|
/* ignore quota */
|
|
}
|
|
}
|
|
|
|
export function AdminSidebarNav({
|
|
allowedPermissions = [],
|
|
isSuperAdmin = false,
|
|
}: {
|
|
/** ACL slugs the staff member holds (ignored when isSuperAdmin). */
|
|
allowedPermissions?: string[];
|
|
isSuperAdmin?: boolean;
|
|
}) {
|
|
const t = useTranslations("pages.admin.nav");
|
|
const pathname = usePathname() ?? "";
|
|
const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
|
|
const [hydrated, setHydrated] = useState(false);
|
|
|
|
const allowed = useMemo(
|
|
() => new Set(allowedPermissions),
|
|
[allowedPermissions],
|
|
);
|
|
|
|
const groups = useMemo(() => {
|
|
const access = {
|
|
isSuperAdmin,
|
|
has: (slug: string) => allowed.has(slug),
|
|
};
|
|
return ADMIN_NAV_GROUPS.map((group) => ({
|
|
...group,
|
|
items: group.items.filter((item) => navItemIsAllowed(item, access)),
|
|
})).filter((group) => group.items.length > 0);
|
|
}, [allowed, isSuperAdmin]);
|
|
|
|
const allKeys = useMemo(() => groups.map((g) => g.labelKey), [groups]);
|
|
|
|
useEffect(() => {
|
|
setCollapsed(readCollapsed());
|
|
setHydrated(true);
|
|
}, []);
|
|
|
|
// Keep the group that contains the current page open.
|
|
useEffect(() => {
|
|
if (!hydrated) return;
|
|
const activeKeys = groups
|
|
.filter((g) => groupHasActive(pathname, g.items))
|
|
.map((g) => g.labelKey);
|
|
if (activeKeys.length === 0) return;
|
|
setCollapsed((prev) => {
|
|
let changed = false;
|
|
const next = { ...prev };
|
|
for (const key of activeKeys) {
|
|
if (next[key]) {
|
|
next[key] = false;
|
|
changed = true;
|
|
}
|
|
}
|
|
if (!changed) return prev;
|
|
persistCollapsed(next);
|
|
return next;
|
|
});
|
|
}, [pathname, hydrated, groups]);
|
|
|
|
const toggle = useCallback((labelKey: string) => {
|
|
setCollapsed((prev) => {
|
|
const next = { ...prev, [labelKey]: !prev[labelKey] };
|
|
persistCollapsed(next);
|
|
return next;
|
|
});
|
|
}, []);
|
|
|
|
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 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]);
|
|
const panelId = `admin-nav-${group.labelKey}`;
|
|
|
|
return (
|
|
<div
|
|
key={group.labelKey}
|
|
className={
|
|
gi > 0 ? "mt-3 border-t border-[var(--admin-border)] pt-3" : ""
|
|
}
|
|
>
|
|
<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>
|
|
</nav>
|
|
);
|
|
}
|