"use client" import * as React from "react" import Link from "next/link" import { usePathname } from "next/navigation" import { PanelLeft } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Separator } from "@/components/ui/separator" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip" /** A single navigation link in the sidebar. */ export interface SidebarItem { /** Display label. */ label: string /** Route path. */ href: string /** Lucide icon element rendered at size-4. */ icon: React.ReactNode /** Badge text shown after the label, e.g. "3" for notification count. */ badge?: string /** Optional action element shown on the right, e.g. a "+" button. */ action?: React.ReactNode } /** A labelled group of sidebar navigation items. */ export interface SidebarSection { /** Unique identifier for this section — used as the React key. */ id: string /** Optional group heading — omit for an ungrouped set of links. */ title?: string items: SidebarItem[] } export interface SidebarProps { /** Navigation sections displayed in order. */ sections: SidebarSection[] /** Slot rendered at the top of the sidebar — typically ``. */ header?: React.ReactNode /** Slot rendered at the bottom of the sidebar — typically user info or settings link. */ footer?: React.ReactNode /** Start collapsed. Defaults to `false`. */ defaultCollapsed?: boolean className?: string } /** * Collapsible dashboard sidebar with icon-and-label navigation, * section grouping, and tooltip labels when collapsed. * * @example * ```tsx * } />} * sections={[ * { title: "Overview", items: [{ label: "Dashboard", href: "/dashboard", icon: }] }, * ]} * /> * ``` */ export function Sidebar({ sections, header, footer, defaultCollapsed = false, className, }: SidebarProps) { const [collapsed, setCollapsed] = React.useState(defaultCollapsed) const pathname = usePathname() return (

{/* Header */}

{header && (

{header}

)} {!collapsed && ( )} {collapsed && ( )}

{/* Navigation */}

{sections.map((section, sectionIdx) => (

{sectionIdx > 0 && } {section.title && !collapsed && (

{section.title}

)}

{item.label} {!collapsed && item.badge && ( {item.badge} )} {!collapsed && item.action && !isActive && ( {item.action} )}

{collapsed ? ( {linkContent} {item.label} {item.badge && ( {item.badge} )} ) : ( linkContent )}

))}

{/* Footer */} {footer && (

{footer}

)}

) }

Prop	Type	Required	Description
`sections`	`SidebarSection[]`	yes	Navigation sections displayed in order.
`header`	`ReactNode`	—	Slot rendered at the top — typically <Logo />.
`footer`	`ReactNode`	—	Slot at the bottom — theme toggle, user info, etc.