"use client"; import { useEffect, useId, useRef, useState } from "react"; import { motion, AnimatePresence, useReducedMotion } from "framer-motion"; import { LayoutDashboard, BarChart3, Users, Activity, Settings, ChevronRight, type LucideIcon, } from "lucide-react"; import { cn } from "@/lib/utils"; const EASE = [0.16, 1, 0.3, 1] as const; interface NavItem { label: string; icon: LucideIcon; hint: string; metric: string; value: string; delta: string; /** 7 integer heights (0-100) for the mini activity chart. */ bars: number[]; } const ITEMS: NavItem[] = [ { label: "Overview", icon: LayoutDashboard, hint: "Everything across the workspace, at a glance.", metric: "Active users", value: "18,204", delta: "+8.2%", bars: [38, 52, 44, 66, 58, 80, 72], }, { label: "Analytics", icon: BarChart3, hint: "Traffic, funnels and conversion in one view.", metric: "Conversion", value: "4.7%", delta: "+0.6pt", bars: [30, 46, 60, 52, 74, 68, 88], }, { label: "Members", icon: Users, hint: "Manage roles, seats and access levels.", metric: "Seats in use", value: "126 / 150", delta: "+9", bars: [50, 54, 58, 61, 64, 70, 74], }, { label: "Activity", icon: Activity, hint: "A live stream of every event as it lands.", metric: "Events / min", value: "1,940", delta: "live", bars: [64, 40, 72, 48, 84, 56, 92], }, { label: "Settings", icon: Settings, hint: "Preferences, integrations and billing.", metric: "Integrations", value: "12 active", delta: "2 new", bars: [44, 46, 50, 49, 54, 52, 58], }, ]; function BrandMark({ reduceMotion }: { reduceMotion: boolean | null }) { return (

); } export function SidebarReveal({ className, autoCycle = true, onActiveChange, }: { className?: string; autoCycle?: boolean; onActiveChange?: (index: number) => void; }) { const [open, setOpen] = useState(false); const [active, setActive] = useState(0); const reduceMotion = useReducedMotion(); const uid = useId(); // Keep the latest `open` readable inside the interval without resetting it. const openRef = useRef(open); openRef.current = open; useEffect(() => { onActiveChange?.(active); }, [active, onActiveChange]); // Idle life: quietly advance the selection while the sidebar is at rest, so a // static preview reads as a working product rather than a frozen screenshot. useEffect(() => { if (!autoCycle || reduceMotion) return; const id = setInterval(() => { if (openRef.current) return; // pause while the user is exploring setActive((i) => (i + 1) % ITEMS.length); }, 2600); return () => clearInterval(id); }, [autoCycle, reduceMotion]); return ( setOpen(true)} onHoverEnd={() => setOpen(false)} animate={{ width: open ? 214 : 68 }} transition={{ duration: 0.44, ease: EASE }} className={cn( "relative flex h-full shrink-0 flex-col overflow-hidden rounded-2xl border border-line bg-panel/90", className )} > {/* thin bright top edge */}

{/* brand */}

{open && (

Lumenite

Production workspace

)}

{/* nav */}

{ITEMS.map((item, i) => { const Icon = item.icon; const isActive = active === i; return ( ); })}

{/* footer account card */}

{open && (

Austin Reyes

austin@lumenite.dev

)}

); } function ContentPreview({ index }: { index: number }) { const item = ITEMS[index]; const reduceMotion = useReducedMotion(); return (

{/* dotted grid */}

{/* slow light sweep keeps the panel alive at rest */} {!reduceMotion && ( )}

Workspace {item.label}

{item.label}

{item.hint}

{item.metric}

{item.value}

{item.delta}

Last 7 days per day

{item.bars.map((h, i) => ( ))}

); } export default function Demo() { const [active, setActive] = useState(0); return (

); }

Sidebar Reveal

Overview