{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"sidebar-01","type":"registry:component","title":"Dashboard Sidebar","description":"Clean dashboard sidebar with navigation menu, search functionality, and user profile section. Features mobile-responsive collapsible design with badges and item counts.","dependencies":["lucide-react"],"registryDependencies":["avatar","badge","button","input","separator","dropdown-menu"],"files":[{"path":"src/registry/blocks/application/navigation-layout/sidebars/sidebar-01.tsx","content":"\"use client\";\n\nimport {\n  BadgeCheck,\n  BarChart3,\n  Bell,\n  Calendar,\n  ChevronsUpDown,\n  CreditCard,\n  FileText,\n  Home,\n  LogOut,\n  type LucideIcon,\n  Mail,\n  Menu,\n  Search,\n  Settings,\n  Sparkles,\n  TrendingUp,\n  Users,\n} from \"lucide-react\";\n\nimport { cn } from \"@/registry/lib/utils\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/registry/ui/avatar\";\nimport { Badge } from \"@/registry/ui/badge\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/ui/dropdown-menu\";\nimport { Input } from \"@/registry/ui/input\";\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n  useSidebar,\n} from \"@/registry/ui/sidebar\";\n\ninterface NavigationItem {\n  icon: LucideIcon;\n  label: string;\n  href: string;\n  isActive?: boolean;\n  badge?: string;\n  count?: number;\n}\n\ninterface UserInfo {\n  name: string;\n  email: string;\n  avatar?: string;\n  initials?: string;\n  role?: string;\n}\n\nexport interface Sidebar01Props {\n  className?: string;\n}\n\nconst content: {\n  brand: {\n    name: string;\n    href: string;\n    logo: React.ReactNode;\n  };\n  user: UserInfo;\n  navigation: NavigationItem[];\n  search: {\n    placeholder: string;\n    enabled: boolean;\n  };\n  features: {\n    showUserProfile: boolean;\n  };\n} = {\n  brand: {\n    name: \"Dashboard\",\n    href: \"/\",\n    logo: (\n      <div className=\"h-8 w-8 rounded-lg bg-primary flex items-center justify-center\">\n        <BarChart3 className=\"h-4 w-4 text-primary-foreground\" />\n      </div>\n    ),\n  },\n  user: {\n    name: \"John Doe\",\n    email: \"john@company.com\",\n    avatar: \"https://randomuser.me/api/portraits/men/1.jpg\",\n    initials: \"JD\",\n    role: \"Product Manager\",\n  },\n  navigation: [\n    { icon: Home, label: \"Dashboard\", href: \"/dashboard\", isActive: true },\n    { icon: BarChart3, label: \"Analytics\", href: \"/analytics\", badge: \"New\" },\n    { icon: Users, label: \"Users\", href: \"/users\", count: 1234 },\n    { icon: FileText, label: \"Reports\", href: \"/reports\" },\n    { icon: TrendingUp, label: \"Growth\", href: \"/growth\" },\n    { icon: Calendar, label: \"Calendar\", href: \"/calendar\" },\n    { icon: Mail, label: \"Messages\", href: \"/messages\", count: 12 },\n    { icon: Settings, label: \"Settings\", href: \"/settings\" },\n  ],\n  search: {\n    placeholder: \"Search...\",\n    enabled: true,\n  },\n  features: {\n    showUserProfile: true,\n  },\n};\n\nexport function Sidebar01({ className }: Sidebar01Props) {\n  const handleNavigationClick = (item: NavigationItem) => {\n    console.log(\"Navigation clicked:\", item);\n  };\n\n  const handleSearchChange = (query: string) => {\n    console.log(\"Search query:\", query);\n  };\n  return (\n    <SidebarProvider>\n      {/* Mobile Menu Button */}\n      <SidebarTrigger\n        className=\"fixed top-4 left-4 z-50 lg:hidden\"\n        data-testid=\"mobile-menu-trigger\"\n      >\n        <Menu className=\"h-5 w-5\" />\n        <span className=\"sr-only\">Open sidebar</span>\n      </SidebarTrigger>\n\n      <Sidebar\n        className={cn(className)}\n        variant=\"sidebar\"\n        data-testid=\"sidebar\"\n      >\n        <SidebarHeader\n          className=\"border-b border-border\"\n          data-testid=\"sidebar-header\"\n        >\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild>\n                <a\n                  href={content.brand.href}\n                  className=\"flex items-center space-x-2\"\n                  data-testid=\"brand-link\"\n                >\n                  {content.brand.logo}\n                  <span className=\"font-semibold text-lg\">\n                    {content.brand.name}\n                  </span>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n\n        <SidebarContent data-testid=\"sidebar-content\">\n          {/* Search */}\n          {content.search.enabled && (\n            <div className=\"p-4\" data-testid=\"search-section\">\n              <div className=\"relative\">\n                <Search className=\"absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground\" />\n                <Input\n                  placeholder={content.search.placeholder}\n                  className=\"pl-9 bg-background\"\n                  onChange={(e) => handleSearchChange(e.target.value)}\n                  data-testid=\"search-input\"\n                />\n              </div>\n            </div>\n          )}\n\n          {/* Navigation */}\n          <SidebarMenu className=\"px-3\" data-testid=\"navigation-menu\">\n            {content.navigation.map((item) => (\n              <SidebarMenuItem key={item.href}>\n                <SidebarMenuButton\n                  asChild\n                  isActive={item.isActive}\n                  tooltip={item.label}\n                >\n                  <a\n                    href={item.href}\n                    onClick={(e) => {\n                      e.preventDefault();\n                      handleNavigationClick(item);\n                    }}\n                    className=\"flex items-center justify-between w-full\"\n                    data-testid={`nav-item-${item.label.toLowerCase().replace(/\\s+/g, \"-\")}`}\n                  >\n                    <div className=\"flex items-center space-x-3\">\n                      <item.icon className=\"h-4 w-4\" />\n                      <span>{item.label}</span>\n                    </div>\n                    {item.badge && (\n                      <Badge\n                        variant=\"secondary\"\n                        className=\"text-xs\"\n                        data-testid=\"nav-badge\"\n                      >\n                        {item.badge}\n                      </Badge>\n                    )}\n                    {item.count && (\n                      <Badge\n                        variant=\"outline\"\n                        className=\"text-xs\"\n                        data-testid=\"nav-count\"\n                      >\n                        {item.count}\n                      </Badge>\n                    )}\n                  </a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarContent>\n\n        {content.features.showUserProfile && (\n          <Sidebar01Footer user={content.user} />\n        )}\n      </Sidebar>\n    </SidebarProvider>\n  );\n}\n\nconst Sidebar01Footer = ({ user }: { user: UserInfo }) => {\n  const { isMobile } = useSidebar();\n\n  return (\n    <SidebarFooter data-testid=\"sidebar-footer\">\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                data-testid=\"user-menu-trigger\"\n              >\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">\n                    {user.initials}\n                  </AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n                <ChevronsUpDown className=\"ml-auto size-4\" />\n              </SidebarMenuButton>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent\n              className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n              side={isMobile ? \"bottom\" : \"right\"}\n              align=\"end\"\n              sideOffset={4}\n              data-testid=\"user-menu-content\"\n            >\n              <DropdownMenuLabel className=\"p-0 font-normal\">\n                <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                  <Avatar className=\"h-8 w-8 rounded-lg\">\n                    <AvatarImage src={user.avatar} alt={user.name} />\n                    <AvatarFallback className=\"rounded-lg\">\n                      {user.initials}\n                    </AvatarFallback>\n                  </Avatar>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">{user.name}</span>\n                    <span className=\"truncate text-xs\">{user.email}</span>\n                  </div>\n                </div>\n              </DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem data-testid=\"upgrade-menu-item\">\n                  <Sparkles />\n                  Upgrade to Pro\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem data-testid=\"account-menu-item\">\n                  <BadgeCheck />\n                  Account\n                </DropdownMenuItem>\n                <DropdownMenuItem data-testid=\"billing-menu-item\">\n                  <CreditCard />\n                  Billing\n                </DropdownMenuItem>\n                <DropdownMenuItem data-testid=\"notifications-menu-item\">\n                  <Bell />\n                  Notifications\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem data-testid=\"logout-menu-item\">\n                <LogOut />\n                Log out\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarFooter>\n  );\n};\n","type":"registry:component"},{"path":"src/registry/lib/utils.ts","content":"import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","type":"registry:lib"}]}