{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sidebar-01",
  "type": "registry:block",
  "title": "Sidebar Collapsible Sections",
  "description": "A sidebar collapsible sections block.",
  "author": "ephraim duncan <https://ephraimduncan.com>",
  "registryDependencies": [
    "avatar",
    "button",
    "collapsible",
    "command",
    "dropdown-menu",
    "sidebar",
    "tooltip"
  ],
  "dependencies": [
    "@tabler/icons-react",
    "lucide-react"
  ],
  "files": [
    {
      "path": "content/components/sidebar/sidebar-01/nav-header.tsx",
      "type": "registry:component",
      "target": "components/sidebar-01/nav-header.tsx",
      "content": "'use client';\n\nimport { Search } from 'lucide-react';\nimport * as React from 'react';\nimport { useEffect } from 'react';\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n} from '@/components/ui/command';\nimport { SidebarHeader } from '@/components/ui/sidebar';\nimport { cn } from '@/lib/utils';\nimport type { SidebarData } from '@/components/sidebar-01/types';\n\ninterface NavHeaderProps {\n  data: SidebarData;\n}\n\nexport function NavHeader({ data }: NavHeaderProps) {\n  const [open, setOpen] = React.useState(false);\n\n  useEffect(() => {\n    const down = (e: KeyboardEvent) => {\n      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {\n        e.preventDefault();\n        setOpen((open) => !open);\n      }\n    };\n    document.addEventListener('keydown', down);\n    return () => document.removeEventListener('keydown', down);\n  }, []);\n\n  return (\n    <>\n      <SidebarHeader>\n        <div\n          className=\"flex cursor-pointer items-center justify-between px-2 pt-3 pb-0\"\n          onClick={() => setOpen(true)}\n        >\n          <div className=\"flex flex-1 items-center gap-3\">\n            <Search className=\"h-4 w-4 text-muted-foreground\" />\n            <span className=\"font-normal text-muted-foreground text-sm\">\n              Search\n            </span>\n          </div>\n          <div className=\"flex items-center justify-center rounded-md border border-border px-2 py-1\">\n            <kbd className=\"inline-flex font-[inherit] font-medium text-muted-foreground text-xs\">\n              <span className=\"opacity-70\">⌘K</span>\n            </kbd>\n          </div>\n        </div>\n      </SidebarHeader>\n\n      <CommandDialog onOpenChange={setOpen} open={open}>\n        <Command>\n          <CommandInput placeholder=\"Search everything...\" />\n          <CommandList>\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandGroup heading=\"Navigation\">\n              {data.navMain.map((item) => (\n                <CommandItem\n                  className=\"py-2!\"\n                  key={item.id}\n                  onSelect={() => {\n                    setOpen(false);\n                  }}\n                >\n                  <item.icon className=\"mr-2 h-4 w-4\" />\n                  <span>{item.title}</span>\n                </CommandItem>\n              ))}\n            </CommandGroup>\n            <CommandSeparator className=\"my-2\" />\n            <CommandGroup heading=\"Favorites\">\n              {data.navCollapsible.favorites.map((item) => (\n                <CommandItem\n                  className=\"py-2!\"\n                  key={item.id}\n                  onSelect={() => {\n                    setOpen(false);\n                  }}\n                >\n                  <div\n                    className={cn('mr-2 h-3 w-3 rounded-full', item.color)}\n                  />\n                  <span>{item.title}</span>\n                </CommandItem>\n              ))}\n            </CommandGroup>\n            <CommandSeparator className=\"my-2\" />\n            <CommandGroup heading=\"Teams\">\n              {data.navCollapsible.teams.map((item) => (\n                <CommandItem\n                  className=\"py-2!\"\n                  key={item.id}\n                  onSelect={() => {\n                    setOpen(false);\n                  }}\n                >\n                  <item.icon className=\"mr-2 h-4 w-4\" />\n                  <span>{item.title}</span>\n                </CommandItem>\n              ))}\n            </CommandGroup>\n            <CommandSeparator className=\"my-2\" />\n            <CommandGroup heading=\"Topics\">\n              {data.navCollapsible.topics.map((item) => (\n                <CommandItem\n                  className=\"py-2!\"\n                  key={item.id}\n                  onSelect={() => {\n                    setOpen(false);\n                  }}\n                >\n                  <item.icon className=\"mr-2 h-4 w-4\" />\n                  <span>{item.title}</span>\n                </CommandItem>\n              ))}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </>\n  );\n}\n"
    },
    {
      "path": "content/components/sidebar/sidebar-01/app-sidebar.tsx",
      "type": "registry:component",
      "target": "components/sidebar-01/app-sidebar.tsx",
      "content": "'use client';\n\nimport {\n  IconAd2,\n  IconBellRinging,\n  IconCalendar,\n  IconCalendarStats,\n  IconListDetails,\n  IconNews,\n  IconNotebook,\n  IconProgressCheck,\n  IconSettingsCode,\n} from '@tabler/icons-react';\nimport { LayoutDashboard, Package } from 'lucide-react';\nimport { Sidebar, SidebarContent } from '@/components/ui/sidebar';\nimport { NavCollapsible } from '@/components/sidebar-01/nav-collapsible';\nimport { NavFooter } from '@/components/sidebar-01/nav-footer';\nimport { NavHeader } from '@/components/sidebar-01/nav-header';\nimport { NavMain } from '@/components/sidebar-01/nav-main';\nimport type { SidebarData } from '@/components/sidebar-01/types';\n\nconst data: SidebarData = {\n  user: {\n    name: 'ephraim',\n    email: 'ephraim@blocks.so',\n    avatar: '/avatar-01.png',\n  },\n  navMain: [\n    {\n      id: 'overview',\n      title: 'Overview',\n      url: '#',\n      icon: LayoutDashboard,\n      isActive: true,\n    },\n    {\n      id: 'tasks',\n      title: 'Tasks',\n      url: '#',\n      icon: IconListDetails,\n    },\n    {\n      id: 'meetings',\n      title: 'Meetings',\n      url: '#',\n      icon: IconCalendarStats,\n    },\n    {\n      id: 'notes',\n      title: 'Notes',\n      url: '#',\n      icon: IconNotebook,\n    },\n    {\n      id: 'calendar',\n      title: 'Calendar',\n      url: '#',\n      icon: IconCalendar,\n    },\n    {\n      id: 'completed',\n      title: 'Completed',\n      url: '#',\n      icon: IconProgressCheck,\n    },\n    {\n      id: 'notifications',\n      title: 'Notifications',\n      url: '#',\n      icon: IconBellRinging,\n    },\n  ],\n  navCollapsible: {\n    favorites: [\n      {\n        id: 'design',\n        title: 'Design',\n        href: '#',\n        color: 'bg-green-400 dark:bg-green-300',\n      },\n      {\n        id: 'development',\n        title: 'Development',\n        href: '#',\n        color: 'bg-blue-400 dark:bg-blue-300',\n      },\n      {\n        id: 'workshop',\n        title: 'Workshop',\n        href: '#',\n        color: 'bg-orange-400 dark:bg-orange-300',\n      },\n      {\n        id: 'personal',\n        title: 'Personal',\n        href: '#',\n        color: 'bg-red-400 dark:bg-red-300',\n      },\n    ],\n    teams: [\n      {\n        id: 'engineering',\n        title: 'Engineering',\n        icon: IconSettingsCode,\n      },\n      {\n        id: 'marketing',\n        title: 'Marketing',\n        icon: IconAd2,\n      },\n    ],\n    topics: [\n      {\n        id: 'product-updates',\n        title: 'Product Updates',\n        icon: Package,\n      },\n      {\n        id: 'company-news',\n        title: 'Company News',\n        icon: IconNews,\n      },\n    ],\n  },\n};\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <NavHeader data={data} />\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavCollapsible\n          favorites={data.navCollapsible.favorites}\n          teams={data.navCollapsible.teams}\n          topics={data.navCollapsible.topics}\n        />\n      </SidebarContent>\n      <NavFooter user={data.user} />\n    </Sidebar>\n  );\n}\n"
    },
    {
      "path": "content/components/sidebar/sidebar-01/nav-collapsible.tsx",
      "type": "registry:component",
      "target": "components/sidebar-01/nav-collapsible.tsx",
      "content": "'use client';\nimport { ChevronDown } from 'lucide-react';\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/components/ui/collapsible';\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/components/ui/sidebar';\nimport type { FavoriteItem, TeamItem, TopicItem } from '@/components/sidebar-01/types';\n\ninterface NavCollapsibleProps {\n  favorites: FavoriteItem[];\n  teams: TeamItem[];\n  topics: TopicItem[];\n}\n\nexport function NavCollapsible({\n  favorites,\n  teams,\n  topics,\n}: NavCollapsibleProps) {\n  return (\n    <div className=\"space-y-0\">\n      {favorites && favorites.length > 0 && (\n        <Collapsible className=\"group/collapsible\" defaultOpen>\n          <SidebarGroup>\n            <SidebarGroupLabel\n              className=\"text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              render={<CollapsibleTrigger />}\n            >\n              Favorites\n              <ChevronDown className=\"ml-auto transition-transform group-data-open/collapsible:rotate-180\" />\n            </SidebarGroupLabel>\n            <CollapsibleContent>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {favorites.map((item) => (\n                    <SidebarMenuItem key={item.id}>\n                      <SidebarMenuButton\n                        render={\n                          <a\n                            className=\"flex items-center gap-3\"\n                            href={item.href}\n                          />\n                        }\n                      >\n                        <div className={`h-3 w-3 rounded ${item.color}`} />\n                        <span>{item.title}</span>\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </CollapsibleContent>\n          </SidebarGroup>\n        </Collapsible>\n      )}\n\n      {teams && teams.length > 0 && (\n        <Collapsible className=\"group/collapsible\">\n          <SidebarGroup>\n            <SidebarGroupLabel\n              className=\"text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              render={<CollapsibleTrigger />}\n            >\n              Teams\n              <ChevronDown className=\"ml-auto transition-transform group-data-open/collapsible:rotate-180\" />\n            </SidebarGroupLabel>\n            <CollapsibleContent>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {teams.map((item) => {\n                    const Icon = item.icon;\n                    return (\n                      <SidebarMenuItem key={item.id}>\n                        <SidebarMenuButton>\n                          <Icon className=\"mr-2 h-4 w-4\" />\n                          {item.title}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    );\n                  })}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </CollapsibleContent>\n          </SidebarGroup>\n        </Collapsible>\n      )}\n\n      {topics && topics.length > 0 && (\n        <Collapsible className=\"group/collapsible\">\n          <SidebarGroup>\n            <SidebarGroupLabel\n              className=\"text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              render={<CollapsibleTrigger />}\n            >\n              Topics\n              <ChevronDown className=\"ml-auto transition-transform group-data-open/collapsible:rotate-180\" />\n            </SidebarGroupLabel>\n            <CollapsibleContent>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {topics.map((item) => {\n                    const Icon = item.icon;\n                    return (\n                      <SidebarMenuItem key={item.id}>\n                        <SidebarMenuButton>\n                          <Icon className=\"mr-2 h-4 w-4\" />\n                          {item.title}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    );\n                  })}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </CollapsibleContent>\n          </SidebarGroup>\n        </Collapsible>\n      )}\n    </div>\n  );\n}\n"
    },
    {
      "path": "content/components/sidebar/sidebar-01/index.tsx",
      "type": "registry:component",
      "target": "components/sidebar-01/index.tsx",
      "content": "import {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/components/ui/sidebar';\nimport { AppSidebar } from '@/components/sidebar-01/app-sidebar';\n\nexport default function Sidebar01() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\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=\"sm:hidden\" />\n          </div>\n        </header>\n      </SidebarInset>\n    </SidebarProvider>\n  );\n}\n"
    },
    {
      "path": "content/components/sidebar/sidebar-01/nav-main.tsx",
      "type": "registry:component",
      "target": "components/sidebar-01/nav-main.tsx",
      "content": "'use client';\n\nimport {\n  SidebarGroup,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/components/ui/sidebar';\nimport type { NavItem } from '@/components/sidebar-01/types';\n\nexport function NavMain({ items }: { items: NavItem[] }) {\n  return (\n    <SidebarGroup>\n      <SidebarMenu>\n        {items.map((item) => {\n          const Icon = item.icon;\n\n          return (\n            <SidebarMenuItem key={item.id}>\n              <SidebarMenuButton tooltip={item.title}>\n                {Icon && <Icon className=\"mr-2 h-4 w-4\" />}\n                <span>{item.title}</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          );\n        })}\n      </SidebarMenu>\n    </SidebarGroup>\n  );\n}\n"
    },
    {
      "path": "content/components/sidebar/sidebar-01/nav-footer.tsx",
      "type": "registry:component",
      "target": "components/sidebar-01/nav-footer.tsx",
      "content": "'use client';\n\nimport {\n  BookmarkPlus,\n  CircleHelp,\n  LogOut,\n  Plus,\n  PlusCircle,\n  Puzzle,\n  Settings,\n  User,\n} from 'lucide-react';\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';\nimport { Button } from '@/components/ui/button';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu';\nimport {\n  SidebarFooter,\n  SidebarMenu,\n  SidebarMenuItem,\n} from '@/components/ui/sidebar';\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/components/ui/tooltip';\n\nexport function NavFooter({\n  user,\n}: {\n  user: {\n    name: string;\n    email: string;\n    avatar: string;\n  };\n}) {\n  return (\n    <SidebarFooter className=\"p-4\">\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <div className=\"flex items-center justify-between gap-2\">\n            <div className=\"flex items-center gap-2\">\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  nativeButton={false}\n                  render={<Avatar className=\"h-8 w-8 rounded-full\" />}\n                >\n                  <AvatarImage alt={user.name} src={user.avatar} />\n                  <AvatarFallback className=\"rounded-full\">CN</AvatarFallback>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent className=\"m-2\">\n                  <DropdownMenuItem>\n                    <User aria-hidden=\"true\" className=\"opacity-80\" size={16} />\n                    Profile\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Settings\n                      aria-hidden=\"true\"\n                      className=\"opacity-80\"\n                      size={16}\n                    />\n                    Settings\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <LogOut\n                      aria-hidden=\"true\"\n                      className=\"opacity-80\"\n                      size={16}\n                    />\n                    Logout\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n\n              <TooltipProvider delay={0}>\n                <Tooltip>\n                  <TooltipTrigger\n                    render={\n                      <CircleHelp\n                        aria-hidden=\"true\"\n                        className=\"cursor-pointer opacity-60 hover:opacity-100\"\n                        size={16}\n                      />\n                    }\n                  />\n                  <TooltipContent\n                    className=\"m-2 max-w-[150px] border bg-popover px-2 py-1 text-popover-foreground\"\n                    side=\"top\"\n                  >\n                    <div className=\"space-y-1 text-xs\">\n                      <p className=\"font-medium\">User Information</p>\n                      <p className=\"text-muted-foreground\">\n                        More details about the current user or section can be\n                        displayed here.\n                      </p>\n                    </div>\n                  </TooltipContent>\n                </Tooltip>\n              </TooltipProvider>\n            </div>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={\n                  <Button\n                    aria-label=\"Open edit menu\"\n                    className=\"rounded-full shadow-none focus-visible:ring-0 focus-visible:ring-offset-0\"\n                    size=\"icon\"\n                    variant=\"ghost\"\n                  />\n                }\n              >\n                <Plus aria-hidden=\"true\" size={16} />\n              </DropdownMenuTrigger>\n              <DropdownMenuContent className=\"pb-2\">\n                <DropdownMenuLabel>Add New</DropdownMenuLabel>\n                <DropdownMenuItem>\n                  <PlusCircle\n                    aria-hidden=\"true\"\n                    className=\"mr-2 opacity-80\"\n                    size={16}\n                  />\n                  Add New Item\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <BookmarkPlus\n                    aria-hidden=\"true\"\n                    className=\"mr-2 opacity-80\"\n                    size={16}\n                  />\n                  Add Bookmark\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <Puzzle\n                    aria-hidden=\"true\"\n                    className=\"mr-2 opacity-80\"\n                    size={16}\n                  />\n                  Add Integration\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </div>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarFooter>\n  );\n}\n"
    },
    {
      "path": "content/components/sidebar/sidebar-01/types.ts",
      "type": "registry:file",
      "target": "components/sidebar-01/types.ts",
      "content": "import type { ElementType } from 'react';\n\nexport interface NavItem {\n  id: string;\n  title: string;\n  icon: ElementType;\n  url?: string;\n  isActive?: boolean;\n}\n\nexport interface User {\n  name: string;\n  email: string;\n  avatar: string;\n}\n\nexport interface FavoriteItem {\n  id: string;\n  title: string;\n  href: string;\n  color: string;\n}\n\nexport interface TeamItem {\n  id: string;\n  title: string;\n  icon: ElementType;\n}\n\nexport interface TopicItem {\n  id: string;\n  title: string;\n  icon: ElementType;\n}\n\nexport interface SidebarData {\n  user: User;\n  navMain: NavItem[];\n  navCollapsible: {\n    favorites: FavoriteItem[];\n    teams: TeamItem[];\n    topics: TopicItem[];\n  };\n}\n"
    }
  ],
  "categories": [
    "sidebar"
  ]
}