{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sidebar-02",
  "description": "Dashboard layout with sidebar and main content area.",
  "registryDependencies": [
    "@lumi-ui/sidebar",
    "@lumi-ui/separator",
    "@lumi-ui/scroll-area",
    "@lumi-ui/dropdown-menu",
    "@lumi-ui/chart",
    "@lumi-ui/collapsible"
  ],
  "files": [
    {
      "path": "registry/blocks/sidebar-02/page.tsx",
      "content": "import { cookies } from \"next/headers\";\nimport type { Layout } from \"react-resizable-panels\";\nimport { AppSidebar } from \"@/registry/blocks/sidebar-02/components/app-sidebar\";\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/ui/breadcrumb\";\nimport { Separator } from \"@/registry/ui/separator\";\nimport {\n  MainContent,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/ui/sidebar\";\n\nconst GROUP_ID = \"main-layout-persistence\";\n\nexport default async function Page() {\n  const cookieStore = await cookies();\n  const layoutCookie = cookieStore.get(GROUP_ID);\n\n  const defaultLayout: Layout = layoutCookie\n    ? JSON.parse(layoutCookie.value)\n    : undefined;\n\n  return (\n    <SidebarProvider\n      collapsibleType=\"sidebar\"\n      defaultLayout={defaultLayout}\n      groupId={GROUP_ID}\n    >\n      <AppSidebar />\n      <MainContent className=\"flex flex-col\">\n        <header className=\"flex h-12 bg-background z-10 sticky top-0 items-center gap-2 p-2 sm:p-4\">\n          <SidebarTrigger />\n          <Separator className=\"mr-2 h-4\" orientation=\"vertical\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Dashboard</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Financial Performance</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </MainContent>\n    </SidebarProvider>\n  );\n}\n",
      "type": "registry:page",
      "target": "app/dashboard/page.tsx"
    },
    {
      "path": "registry/blocks/sidebar-02/components/app-sidebar.tsx",
      "content": "import { ScrollArea } from \"@/registry/ui/scroll-area\";\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/ui/sidebar\";\nimport { NavMain } from \"./nav-main\";\nimport { VersionSwitcher } from \"./version-switcher\";\n\nexport function AppSidebar() {\n  return (\n    <Sidebar>\n      <SidebarHeader>\n        <VersionSwitcher\n          defaultVersion={data.versions[0]}\n          versions={data.versions}\n        />\n      </SidebarHeader>\n      <SidebarContent>\n        <ScrollArea gradientScrollFade>\n          <NavMain items={data.navMain} />\n          {data.navMain.map((item) => (\n            <SidebarGroup key={item.title}>\n              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {item.items.map((item) => (\n                    <SidebarMenuItem key={item.title}>\n                      <SidebarMenuButton\n                        isActive={item.isActive}\n                        render={<a href={item.url}>{item.title}</a>}\n                        tooltip={{\n                          children: \"hello\",\n                        }}\n                      />\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          ))}\n        </ScrollArea>\n      </SidebarContent>\n    </Sidebar>\n  );\n}\n\nconst data = {\n  navMain: [\n    {\n      items: [\n        {\n          title: \"Overview\",\n          url: \"#\",\n        },\n        {\n          isActive: true,\n          title: \"Analytics\",\n          url: \"#\",\n        },\n        {\n          title: \"Reports\",\n          url: \"#\",\n        },\n      ],\n      title: \"Dashboard\",\n      url: \"#\",\n    },\n    {\n      items: [\n        {\n          title: \"All Users\",\n          url: \"#\",\n        },\n        {\n          title: \"Roles & Permissions\",\n          url: \"#\",\n        },\n        {\n          title: \"Teams\",\n          url: \"#\",\n        },\n        {\n          title: \"Invitations\",\n          url: \"#\",\n        },\n        {\n          title: \"Activity Logs\",\n          url: \"#\",\n        },\n      ],\n      title: \"User Management\",\n      url: \"#\",\n    },\n    {\n      items: [\n        {\n          title: \"All Projects\",\n          url: \"#\",\n        },\n        {\n          title: \"Active Projects\",\n          url: \"#\",\n        },\n        {\n          title: \"Archived\",\n          url: \"#\",\n        },\n        {\n          title: \"Templates\",\n          url: \"#\",\n        },\n      ],\n      title: \"Projects\",\n      url: \"#\",\n    },\n    {\n      items: [\n        {\n          title: \"Transactions\",\n          url: \"#\",\n        },\n        {\n          title: \"Subscriptions\",\n          url: \"#\",\n        },\n        {\n          title: \"Invoices\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Payment Methods\",\n          url: \"#\",\n        },\n      ],\n      title: \"Sales & Revenue\",\n      url: \"#\",\n    },\n    {\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Security\",\n          url: \"#\",\n        },\n        {\n          title: \"Integrations\",\n          url: \"#\",\n        },\n        {\n          title: \"Notifications\",\n          url: \"#\",\n        },\n        {\n          title: \"API Keys\",\n          url: \"#\",\n        },\n        {\n          title: \"Webhooks\",\n          url: \"#\",\n        },\n      ],\n      title: \"Settings\",\n      url: \"#\",\n    },\n  ],\n  user: {\n    email: \"m@example.com\",\n    name: \"Lumi UI\",\n  },\n  versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n};\n",
      "type": "registry:component"
    },
    {
      "path": "registry/blocks/sidebar-02/components/nav-main.tsx",
      "content": "\"use client\";\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\";\nimport {\n  Collapsible,\n  CollapsiblePanel,\n  CollapsibleTrigger,\n} from \"@/registry/ui/collapsible\";\nimport {\n  SidebarGroup,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/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      <SidebarMenu>\n        {items.map((item) => (\n          <SidebarMenuItem key={item.title}>\n            <Collapsible defaultOpen={item.isActive}>\n              <CollapsibleTrigger\n                className=\"group/collapsible data-[panel-open]:bg-sidebar-accent data-[panel-open]:text-sidebar-accent-foreground\"\n                render={\n                  <SidebarMenuButton\n                    tooltip={{\n                      children: item.title,\n                      side: \"right\",\n                    }}\n                  >\n                    {item.icon && <item.icon />}\n                    <span>{item.title}</span>\n                    <ChevronRight className=\"ml-auto text-muted-foreground transition-[transform,colors] duration-200 group-data-[panel-open]/collapsible:rotate-90 group-data-[panel-open]/collapsible:text-foreground group-hover/collapsible:text-sidebar-foreground\" />\n                  </SidebarMenuButton>\n                }\n              />\n              <CollapsiblePanel>\n                <SidebarMenuSub>\n                  {item.items?.map((subItem) => (\n                    <SidebarMenuSubItem key={subItem.title}>\n                      <SidebarMenuSubButton\n                        render={\n                          <a href={subItem.url}>\n                            <span>{subItem.title}</span>\n                          </a>\n                        }\n                      />\n                    </SidebarMenuSubItem>\n                  ))}\n                </SidebarMenuSub>\n              </CollapsiblePanel>\n            </Collapsible>\n          </SidebarMenuItem>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/blocks/sidebar-02/components/version-switcher.tsx",
      "content": "\"use client\";\n\nimport {\n  BadgeCheckIcon,\n  ChevronsUpDown,\n  GalleryVerticalEnd,\n} from \"lucide-react\";\nimport * as React from \"react\";\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItemContent,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from \"@/registry/ui/dropdown-menu\";\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/ui/sidebar\";\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[];\n  defaultVersion: string;\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion);\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                className=\"data-[popup-open]:bg-sidebar-accent data-[popup-open]:text-sidebar-accent-foreground justify-between px-2 gap-2\"\n                size=\"lg\"\n              >\n                <span>\n                  <GalleryVerticalEnd className=\"size-4\" />\n                </span>\n                <div className=\"flex flex-col gap-1 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"text-muted-foreground\">\n                    v{selectedVersion}\n                  </span>\n                </div>\n                <ChevronsUpDown className=\"ml-auto\" />\n              </SidebarMenuButton>\n            }\n          />\n          <DropdownMenuContent matchAnchorWidth>\n            {versions.map((version) => (\n              <DropdownMenuCheckboxItemContent\n                checked={version === selectedVersion}\n                closeOnClick\n                indicatorIcon={<BadgeCheckIcon />}\n                indicatorPlacement=\"end\"\n                key={version}\n                onCheckedChange={() => setSelectedVersion(version)}\n              >\n                v{version}\n              </DropdownMenuCheckboxItemContent>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "iframeHeight": 1200
  },
  "categories": [
    "sidebar",
    "dashboard"
  ],
  "type": "registry:block"
}