"use client"; import { useEffect, useId, useMemo, useRef, useState } from "react"; import { motion, AnimatePresence, useReducedMotion } from "framer-motion"; import { LayoutDashboard, LineChart, FolderKanban, Users, UserRound, ShieldCheck, CreditCard, Settings, ChevronRight, ChevronsUpDown, Check, MoreHorizontal, type LucideIcon, } from "lucide-react"; import { cn } from "@/lib/utils"; const EASE = [0.16, 1, 0.3, 1] as const; type Group = "platform" | "team" | "account"; interface NavItem { id: string; label: string; icon: LucideIcon; group: Group; badge?: string; } interface Workspace { id: string; name: string; plan: string; from: string; to: string; } const WORKSPACES: Workspace[] = [ { id: "lumenite", name: "Lumenite", plan: "Pro workspace", from: "#7c6cff", to: "#5b8cff" }, { id: "northwind", name: "Northwind Labs", plan: "Team plan", from: "#f472b6", to: "#f59e0b" }, { id: "meridian", name: "Meridian", plan: "Free plan", from: "#34d399", to: "#22d3ee" }, ]; // Ordered exactly as they render, so the idle loop reads top-to-bottom. const NAV: NavItem[] = [ { id: "dashboard", label: "Dashboard", icon: LayoutDashboard, group: "platform" }, { id: "analytics", label: "Analytics", icon: LineChart, group: "platform" }, { id: "projects", label: "Projects", icon: FolderKanban, group: "platform", badge: "6" }, { id: "members", label: "Members", icon: UserRound, group: "team", badge: "24" }, { id: "permissions", label: "Permissions", icon: ShieldCheck, group: "team" }, { id: "billing", label: "Billing", icon: CreditCard, group: "account" }, { id: "settings", label: "Settings", icon: Settings, group: "account" }, ]; function GroupLabel({ children }: { children: React.ReactNode }) { return (

{children}

); } function ItemBody({ item, active, sub = false, }: { item: NavItem; active: boolean; sub?: boolean; }) { const Icon = item.icon; return ( <> {item.label} {item.badge ? ( {item.badge} ) : null} ); } function ActivePill({ uid }: { uid: string }) { return ( <> ); } export function SidebarNav({ className, autoCycle = true, onActiveChange, }: { className?: string; autoCycle?: boolean; onActiveChange?: (id: string) => void; }) { const uid = useId(); const reduceMotion = useReducedMotion(); const [activeIdx, setActiveIdx] = useState(0); const [workspaceIdx, setWorkspaceIdx] = useState(0); const [switcherOpen, setSwitcherOpen] = useState(false); const [manualTeam, setManualTeam] = useState(false); const [paused, setPaused] = useState(false); const active = NAV[activeIdx]; const activeIsTeam = active.group === "team"; // Derived synchronously so the shared pill can slide into the section on the // very same frame the loop reaches a team item (no unmount / pop). const teamOpen = activeIsTeam || manualTeam; const workspace = WORKSPACES[workspaceIdx]; const teamCount = useMemo(() => NAV.filter((n) => n.group === "team").length, []); const pausedRef = useRef(paused); pausedRef.current = paused || switcherOpen; useEffect(() => { onActiveChange?.(active.id); }, [active.id, onActiveChange]); // Idle life: quietly advance the selection so a static preview reads as a // working product. Pauses while the user is exploring the sidebar. useEffect(() => { if (!autoCycle || reduceMotion) return; const id = setInterval(() => { if (pausedRef.current) return; setActiveIdx((i) => (i + 1) % NAV.length); }, 2400); return () => clearInterval(id); }, [autoCycle, reduceMotion]); function selectItem(idx: number) { setActiveIdx(idx); } const platform = NAV.filter((n) => n.group === "platform"); const team = NAV.filter((n) => n.group === "team"); const account = NAV.filter((n) => n.group === "account"); return (

setPaused(true)} onMouseLeave={() => { setPaused(false); setSwitcherOpen(false); }} className={cn( "relative flex h-full w-[264px] shrink-0 flex-col overflow-hidden rounded-2xl border border-white/10 bg-white/[0.02] backdrop-blur-xl", className )} > {/* frosted lighting: thin top edge + soft brand glow behind the header */}

{/* workspace switcher */}

{switcherOpen && ( {WORKSPACES.map((ws, i) => { const selected = i === workspaceIdx; return ( ); })} )}

{/* navigation */}

Platform {platform.map((item) => { const idx = NAV.indexOf(item); const isActive = idx === activeIdx; return ( ); })} {/* collapsible section */}

{teamOpen && (

{team.map((item) => { const idx = NAV.indexOf(item); const isActive = idx === activeIdx; return ( ); })}

)}

Account {account.map((item) => { const idx = NAV.indexOf(item); const isActive = idx === activeIdx; return ( ); })}

{/* user chip */}

MV {!reduceMotion && ( )}

Mara Vance

mara@lumenite.io

); } export default function Demo() { return (

{/* ambient color so the frosted panel has something to blur over */}

); }

Sidebar Nav