{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sidebar-layouts",
  "type": "registry:component",
  "title": "Sidebar Layouts",
  "author": "Toby Belhome",
  "description": "Create organized and accessible dashboard interfaces with Tailwind CSS sidebar layouts. These sections feature collapsible menus, clear navigation, and responsive design to enhance usability. Perfect for SaaS platforms, admin panels, and analytics tools aiming for a modern, user-friendly, and efficient workflow.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "sidebar",
    "separator",
    "scroll-area",
    "collapsible",
    "sidebar"
  ],
  "files": [
    {
      "path": "examples/blocks/dashboard-ui/sidebar-layouts/01/components/app-header.tsx",
      "content": "import { SidebarTrigger } from \"@/components/ui/sidebar\";\nimport { Separator } from \"@/components/ui/separator\";\n\nexport function AppHeader() {\n  return (\n    <header className=\"flex h-16 shrink-0 items-center gap-2\">\n      <div className=\"flex items-center gap-2 px-4\">\n        <SidebarTrigger className=\"-ml-1\" />\n        <Separator orientation=\"vertical\" className=\"mr-2 data-[orientation=vertical]:h-4\" />\n        <div className=\"font-medium\">Dashboard</div>\n      </div>\n    </header>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/sidebar-layouts/components/app-header.tsx"
    },
    {
      "path": "examples/blocks/dashboard-ui/sidebar-layouts/01/components/app-sidebar.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport {\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  Map,\n  PieChart,\n  Settings2,\n  SquareTerminal\n} from \"lucide-react\";\n\nimport { NavMain } from \"./nav-main\";\nimport { NavProjects } from \"./nav-projects\";\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem\n} from \"@/components/ui/sidebar\";\nimport { ScrollArea } from \"@/components/ui/scroll-area\";\n\nconst data = {\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: SquareTerminal\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: Bot\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: BookOpen\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2\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 function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"sidebar\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <Command className=\"size-4\" />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <ScrollArea className=\"h-full\">\n          <NavMain items={data.navMain} />\n          <NavProjects projects={data.projects} />\n        </ScrollArea>\n      </SidebarContent>\n    </Sidebar>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/sidebar-layouts/components/app-sidebar.tsx"
    },
    {
      "path": "examples/blocks/dashboard-ui/sidebar-layouts/01/components/nav-main.tsx",
      "content": "\"use client\";\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\";\n\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from \"@/components/ui/collapsible\";\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem\n} from \"@/components/ui/sidebar\";\n\nexport function NavMain({\n  items\n}: {\n  items: {\n    title: string;\n    url: string;\n    icon: LucideIcon;\n    isActive?: boolean;\n    items?: {\n      title: string;\n      url: string;\n    }[];\n  }[];\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <Collapsible key={item.title} asChild defaultOpen={item.isActive}>\n            <SidebarMenuItem>\n              <SidebarMenuButton asChild tooltip={item.title}>\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n              {item.items?.length ? (\n                <>\n                  <CollapsibleTrigger asChild>\n                    <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                      <ChevronRight />\n                      <span className=\"sr-only\">Toggle</span>\n                    </SidebarMenuAction>\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                </>\n              ) : null}\n            </SidebarMenuItem>\n          </Collapsible>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/sidebar-layouts/components/nav-main.tsx"
    },
    {
      "path": "examples/blocks/dashboard-ui/sidebar-layouts/01/components/nav-projects.tsx",
      "content": "\"use client\";\n\nimport { type LucideIcon } from \"lucide-react\";\n\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem\n} from \"@/components/ui/sidebar\";\nimport Link from \"next/link\";\n\nexport function NavProjects({\n  projects\n}: {\n  projects: {\n    name: string;\n    url: string;\n    icon: LucideIcon;\n  }[];\n}) {\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Projects</SidebarGroupLabel>\n      <SidebarMenu>\n        {projects.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <Link href={item.url}>\n                <item.icon />\n                <span>{item.name}</span>\n              </Link>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/sidebar-layouts/components/nav-projects.tsx"
    },
    {
      "path": "examples/blocks/dashboard-ui/sidebar-layouts/01/page.tsx",
      "content": "import { SidebarInset, SidebarProvider } from \"@/components/ui/sidebar\";\n\nimport { AppSidebar } from \"./components/app-sidebar\";\nimport { AppHeader } from \"./components/app-header\";\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <AppHeader />\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"bg-muted/50 grid min-h-[100vh] flex-1 place-items-center rounded-xl md:min-h-min\">\n            <span className=\"text-muted-foreground text-sm\">Content goes here</span>\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/sidebar-layouts/sidebar-layouts.tsx"
    }
  ],
  "meta": {
    "isPro": true
  }
}