{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "radix-sidebar-demo",
  "type": "registry:ui",
  "title": "Radix Sidebar Demo",
  "description": "Demo showing a sidebar with radix components.",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "registryDependencies": [
    "https://animate-ui.com/r/radix-sidebar",
    "https://animate-ui.com/r/radix-collapsible",
    "https://animate-ui.com/r/radix-dropdown-menu",
    "use-mobile",
    "avatar",
    "breadcrumb",
    "separator"
  ],
  "files": [
    {
      "path": "registry/demo/radix/sidebar/index.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/components/ui/breadcrumb';\nimport { Separator } from '@/components/ui/separator';\nimport {\n  SidebarProvider,\n  SidebarInset,\n  SidebarTrigger,\n  Sidebar,\n  SidebarHeader,\n  SidebarContent,\n  SidebarFooter,\n  SidebarRail,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuItem,\n  SidebarMenuButton,\n  SidebarMenuSub,\n  SidebarMenuSubItem,\n  SidebarMenuSubButton,\n  SidebarMenuAction,\n} from '@/components/animate-ui/radix/sidebar';\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/components/animate-ui/radix/collapsible';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/components/animate-ui/radix/dropdown-menu';\nimport {\n  AudioWaveform,\n  BadgeCheck,\n  Bell,\n  BookOpen,\n  Bot,\n  ChevronRight,\n  ChevronsUpDown,\n  Command,\n  CreditCard,\n  Folder,\n  Forward,\n  Frame,\n  GalleryVerticalEnd,\n  LogOut,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Plus,\n  Settings2,\n  Sparkles,\n  SquareTerminal,\n  Trash2,\n} from 'lucide-react';\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/components/ui/avatar';\nimport { useIsMobile } from '@/hooks/use-mobile';\n\nconst DATA = {\n  user: {\n    name: 'Skyleen',\n    email: 'skyleen@example.com',\n    avatar:\n      'https://pbs.twimg.com/profile_images/1909615404789506048/MTqvRsjo_400x400.jpg',\n  },\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: GalleryVerticalEnd,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\n    },\n  ],\n};\n\nexport const RadixSidebarDemo = () => {\n  const isMobile = useIsMobile();\n  const [activeTeam, setActiveTeam] = React.useState(DATA.teams[0]);\n\n  if (!activeTeam) return null;\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          {/* Team Switcher */}\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                  >\n                    <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                      <activeTeam.logo className=\"size-4\" />\n                    </div>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-semibold\">\n                        {activeTeam.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {activeTeam.plan}\n                      </span>\n                    </div>\n                    <ChevronsUpDown className=\"ml-auto\" />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                  align=\"start\"\n                  side={isMobile ? 'bottom' : 'right'}\n                  sideOffset={4}\n                >\n                  <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                    Teams\n                  </DropdownMenuLabel>\n                  {DATA.teams.map((team, index) => (\n                    <DropdownMenuItem\n                      key={team.name}\n                      onClick={() => setActiveTeam(team)}\n                      className=\"gap-2 p-2\"\n                    >\n                      <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                        <team.logo className=\"size-4 shrink-0\" />\n                      </div>\n                      {team.name}\n                      <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n                    </DropdownMenuItem>\n                  ))}\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem className=\"gap-2 p-2\">\n                    <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                      <Plus className=\"size-4\" />\n                    </div>\n                    <div className=\"font-medium text-muted-foreground\">\n                      Add team\n                    </div>\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          {/* Team Switcher */}\n        </SidebarHeader>\n\n        <SidebarContent>\n          {/* Nav Main */}\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {DATA.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                >\n                  <SidebarMenuItem>\n                    <CollapsibleTrigger asChild>\n                      <SidebarMenuButton tooltip={item.title}>\n                        {item.icon && <item.icon />}\n                        <span>{item.title}</span>\n                        <ChevronRight className=\"ml-auto transition-transform duration-300 group-data-[state=open]/collapsible:rotate-90\" />\n                      </SidebarMenuButton>\n                    </CollapsibleTrigger>\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items?.map((subItem) => (\n                          <SidebarMenuSubItem key={subItem.title}>\n                            <SidebarMenuSubButton asChild>\n                              <a href={subItem.url}>\n                                <span>{subItem.title}</span>\n                              </a>\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          {/* Nav Main */}\n\n          {/* Nav Project */}\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {DATA.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url}>\n                      <item.icon />\n                      <span>{item.name}</span>\n                    </a>\n                  </SidebarMenuButton>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <SidebarMenuAction showOnHover>\n                        <MoreHorizontal />\n                        <span className=\"sr-only\">More</span>\n                      </SidebarMenuAction>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      className=\"w-48 rounded-lg\"\n                      side={isMobile ? 'bottom' : 'right'}\n                      align={isMobile ? 'end' : 'start'}\n                    >\n                      <DropdownMenuItem>\n                        <Folder className=\"text-muted-foreground\" />\n                        <span>View Project</span>\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <Forward className=\"text-muted-foreground\" />\n                        <span>Share Project</span>\n                      </DropdownMenuItem>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem>\n                        <Trash2 className=\"text-muted-foreground\" />\n                        <span>Delete Project</span>\n                      </DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </SidebarMenuItem>\n              ))}\n              <SidebarMenuItem>\n                <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n                  <MoreHorizontal className=\"text-sidebar-foreground/70\" />\n                  <span>More</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroup>\n          {/* Nav Project */}\n        </SidebarContent>\n        <SidebarFooter>\n          {/* Nav User */}\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                  >\n                    <Avatar className=\"h-8 w-8 rounded-lg\">\n                      <AvatarImage\n                        src={DATA.user.avatar}\n                        alt={DATA.user.name}\n                      />\n                      <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                    </Avatar>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-semibold\">\n                        {DATA.user.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {DATA.user.email}\n                      </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                >\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\n                          src={DATA.user.avatar}\n                          alt={DATA.user.name}\n                        />\n                        <AvatarFallback className=\"rounded-lg\">\n                          CN\n                        </AvatarFallback>\n                      </Avatar>\n                      <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                          {DATA.user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">\n                          {DATA.user.email}\n                        </span>\n                      </div>\n                    </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <Sparkles />\n                      Upgrade to Pro\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <BadgeCheck />\n                      Account\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <CreditCard />\n                      Billing\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <Bell />\n                      Notifications\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <LogOut />\n                    Log out\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          {/* Nav User */}\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Building Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/animate-ui/demo/radix/sidebar.tsx"
    }
  ]
}