{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sidebar-light",
  "title": "Sidebar Light",
  "description": "Lightweight sidebar navigation with nested items and active state.",
  "files": [
    {
      "path": "registry/blocks/sidebar-light/sidebar-light.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\nimport { usePathname } from \"next/navigation\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface NavItem {\n  title: string\n  href: string\n  icon?: React.ComponentType<{ className?: string }>\n  items?: NavItem[]\n}\n\ninterface SidebarLightProps {\n  items: NavItem[]\n  className?: string\n}\n\ninterface NavItemRendererProps {\n  item: NavItem\n  pathname: string\n  depth: number\n}\n\nfunction NavItemRenderer({ item, pathname, depth }: NavItemRendererProps) {\n  const hasChildren = item.items && item.items.length > 0\n  const isActive = pathname === item.href\n\n  // Parent item with children (section header)\n  if (hasChildren) {\n    return (\n      <div className=\"space-y-1\">\n        <div\n          className={cn(\n            \"flex items-center gap-2 text-sm\",\n            depth === 0 && \"px-3 py-2 font-semibold text-foreground\",\n            depth > 0 && \"px-3 py-1.5 font-medium text-muted-foreground\"\n          )}\n        >\n          {item.icon && <item.icon className={cn(depth === 0 ? \"h-4 w-4\" : \"h-3.5 w-3.5\")} />}\n          {item.title}\n        </div>\n        <div className={cn(\"ml-4 space-y-1 border-l border-border pl-2\")}>\n          {item.items!.map((subItem, index) => (\n            <NavItemRenderer\n              key={subItem.href !== \"#\" ? subItem.href : `${subItem.title}-${index}`}\n              item={subItem}\n              pathname={pathname}\n              depth={depth + 1}\n            />\n          ))}\n        </div>\n      </div>\n    )\n  }\n\n  // Leaf item (link)\n  return (\n    <Link\n      href={item.href}\n      className={cn(\n        \"flex items-center gap-2 text-sm rounded-md transition-colors\",\n        depth === 0 && \"px-3 py-2\",\n        depth > 0 && \"px-3 py-1.5\",\n        isActive\n          ? \"bg-muted font-medium text-foreground\"\n          : \"text-muted-foreground hover:text-foreground hover:bg-muted/50\"\n      )}\n    >\n      {item.icon && <item.icon className={cn(depth === 0 ? \"h-4 w-4\" : \"h-3.5 w-3.5\")} />}\n      {item.title}\n    </Link>\n  )\n}\n\nfunction SidebarLight({ items, className }: SidebarLightProps) {\n  const pathname = usePathname()\n\n  return (\n    <aside className={cn(\"w-full\", className)}>\n      <nav className=\"space-y-1\">\n        {items.map((item, index) => (\n          <NavItemRenderer\n            key={item.href !== \"#\" ? item.href : `${item.title}-${index}`}\n            item={item}\n            pathname={pathname}\n            depth={0}\n          />\n        ))}\n      </nav>\n    </aside>\n  )\n}\n\nexport { SidebarLight }\nexport type { SidebarLightProps }\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}