"use client";
import { useState, type ComponentType } from "react";
import { useTranslations } from "next-intl";
import {
Award,
BookOpen,
Building2,
ShieldCheck,
Gauge,
Megaphone,
ScrollText,
CalendarRange,
CheckSquare,
ChevronDown,
ClipboardList,
DoorOpen,
DollarSign,
GraduationCap,
History,
Library,
LayoutDashboard,
Layers,
Link2,
List,
PanelLeftClose,
PanelLeftOpen,
Plus,
Settings,
TrendingUp,
User as UserIcon,
UserCog,
UserPlus,
Users,
} from "lucide-react";
import { Link, usePathname } from "@/i18n/navigation";
import { useAuth } from "@/contexts/auth-context";
import { isPlatformSession } from "@/lib/platform";
import { useStaggerIn } from "@/hooks/use-stagger-in";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
const STORAGE_KEY = "sidebar-collapsed";
// SiteSidebar never renders real DOM during SSR — it returns null until
// useAuth() resolves (well after hydration) — so reading localStorage in
// this lazy initializer can't cause a hydration mismatch, and avoids the
// setState-in-effect this project's lint rule flags for the usual
// "sync from localStorage in an effect" pattern.
function readStoredCollapsed(): boolean {
if (typeof window === "undefined") return false;
try {
return localStorage.getItem(STORAGE_KEY) === "1";
} catch {
return false;
}
}
function readStoredGroupOpen(key: string, fallback: boolean): boolean {
if (typeof window === "undefined") return fallback;
try {
const value = localStorage.getItem(key);
return value === null ? fallback : value === "1";
} catch {
return fallback;
}
}
// Groups an index page + its create page under one collapsible entry
// (e.g. "Students" -> "All students" / "Add student") instead of two flat
// top-level links. Collapses to a single link to `fallbackHref` when the
// whole sidebar itself is icon-only, since there's no room to nest there.
function SidebarGroup({
icon: Icon,
label,
collapsed,
storageKey,
fallbackHref,
children,
}: {
icon: ComponentType<{ className?: string }>;
label: string;
collapsed: boolean;
storageKey: string;
fallbackHref: string;
children: React.ReactNode;
}) {
const [open, setOpen] = useState(() => readStoredGroupOpen(storageKey, false));
if (collapsed) {
return (
);
}
function toggle() {
setOpen((prev) => {
const next = !prev;
try {
localStorage.setItem(storageKey, next ? "1" : "0");
} catch {
// ignore
}
return next;
});
}
return (
{open &&
{children}
}
);
}
function SidebarLink({
href,
icon: Icon,
label,
collapsed,
}: {
href: string;
icon: ComponentType<{ className?: string }>;
label: string;
collapsed: boolean;
}) {
const pathname = usePathname();
const isActive = pathname === href;
return (
{!collapsed && label}
);
}
export function SiteSidebar() {
const t = useTranslations("Nav");
const { user, isLoading, can, hasRole } = useAuth();
// Modules outside the school's plan are hidden (the API refuses them too).
// No plan info (no current school) hides nothing.
const hasFeature = (feature: string) => !user?.plan_features || user.plan_features.includes(feature);
const pathname = usePathname();
const [collapsed, setCollapsed] = useState(readStoredCollapsed);
const ref = useStaggerIn({ selector: "[data-animate='sidebar-link']" });
function toggle() {
setCollapsed((prev) => {
const next = !prev;
try {
localStorage.setItem(STORAGE_KEY, next ? "1" : "0");
} catch {
// ignore
}
return next;
});
}
// Same guest/loading gate as SiteHeader's user menu — no sidebar until
// there's someone logged in to show nav for. The landing page is a
// full-width marketing page even for logged-in users, so it never gets
// a sidebar either.
if (isLoading || !user || pathname === "/") return null;
return (
);
}