'use client' import { useEffect, useRef, useState, type ReactNode } from 'react' import { Check, ChevronRight, ChevronsUpDown, CircleDashed, Folder as FolderIcon, GripVertical, Plus, X, type LucideIcon } from 'lucide-react' import { Button } from '@/components/ui/button' import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible' import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu' import { cn } from '@/lib/utils' import { dashboards, demoFolders, footerItems, navItems, workspaces, type Folder, type NavItem } from "@/components/data" export interface WorkspaceSidebarProps { /** Folder list; pass an empty array to show the empty state. */ folders?: Folder[] className?: string } const hideScrollbar = '[scrollbar-width:none] [&::-webkit-scrollbar]:hidden' const rowBase = 'flex h-10 w-full items-center gap-3 rounded-lg px-3 text-sm transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring' const rowActive = 'border border-border/70 bg-background font-medium text-foreground shadow-sm' const rowIdle = 'text-muted-foreground hover:bg-accent hover:text-foreground' const avatarRing = 'ring-1 ring-inset ring-white/15' function Kbd({ children, className }: { children: ReactNode; className?: string }) { return {children} } function NotificationDot({ label }: { label: string }) { return ( {label} ) } /** Decorative macOS window chrome — drop this row when embedding in your own app shell. */ function TrafficLights() { return ( ) } function WorkspaceSwitcher() { const active = workspaces.find((workspace) => workspace.active) ?? workspaces[0] return ( Switch Workspace {workspaces.map((workspace) => ( {workspace.initial} {workspace.name} {workspace.members} members {workspace.active ? ( Active workspace ) : ( workspace.shortcut && {workspace.shortcut} )} ))} Create new workspace ⌘N ) } function NavRow({ item }: { item: NavItem }) { const Icon = item.icon return ( ) } function SidebarGroup({ label, defaultOpen = true, children }: { label: string; defaultOpen?: boolean; children: ReactNode }) { const [open, setOpen] = useState(defaultOpen) return ( {children} ) } function DashboardsGroup() { return (

) } function FoldersGroup({ folders }: { folders: Folder[] }) { return ( {folders.length === 0 ? (

No Folders

) : (

)} ) } function FooterRow({ icon: Icon, label, dot }: { icon: LucideIcon; label: string; dot?: boolean }) { return ( ) } /** Shared sidebar content used by both the desktop rail and the mobile drawer. */ function SidebarBody({ folders, onClose }: { folders: Folder[]; onClose?: () => void }) { return ( <>

{onClose ? ( ) : null}

{navItems.map((item) => ( ))}

{footerItems.map((item) => ( ))}

) } /** Desktop sidebar rail — hidden below `lg`, where the mobile drawer takes over. */ export function WorkspaceSidebar({ folders = demoFolders, className }: WorkspaceSidebarProps) { return ( ) } /** Off-canvas workspace drawer for small screens. Controlled by the host. */ export function WorkspaceMobileSidebar({ open, onClose, folders = demoFolders, className }: { open: boolean; onClose: () => void; folders?: Folder[]; className?: string }) { const panelRef = useRef(null) const restoreRef = useRef(null) useEffect(() => { if (!open) return restoreRef.current = document.activeElement as HTMLElement | null const focusables = panelRef.current ? Array.from(panelRef.current.querySelectorAll('button, [href], input, [tabindex]:not([tabindex="-1"])')) : [] focusables[0]?.focus() const prevOverflow = document.body.style.overflow document.body.style.overflow = 'hidden' const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') { onClose() return } if (e.key === 'Tab' && focusables.length > 0) { const first = focusables[0] const last = focusables[focusables.length - 1] if (e.shiftKey && document.activeElement === first) { e.preventDefault() last.focus() } else if (!e.shiftKey && document.activeElement === last) { e.preventDefault() first.focus() } } } document.addEventListener('keydown', onKey) return () => { document.removeEventListener('keydown', onKey) document.body.style.overflow = prevOverflow restoreRef.current?.focus() } }, [open, onClose]) return (

) }

More sidebars