{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sidebar-layout",
  "title": "Sidebar Layout",
  "description": "A full application layout with a collapsible sidebar, header, and content area.",
  "registryDependencies": [
    "@hoogin/sidebar",
    "@hoogin/app-sidebar",
    "@hoogin/theme-toggle",
    "separator",
    "tooltip"
  ],
  "files": [
    {
      "path": "registry/ui/sidebar-layout.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Separator } from \"@/components/ui/separator\"\nimport { TooltipProvider } from \"@/components/ui/tooltip\"\nimport { AppSidebar } from \"@/hoogin/ui/app-sidebar\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/hoogin/ui/sidebar\"\nimport type {\n  SidebarBrand,\n  SidebarMore,\n  SidebarNavItem,\n  SidebarProject,\n  SidebarSecondaryItem,\n  SidebarUser,\n  SidebarUserMenu,\n} from \"@/hoogin/ui/sidebar.types\"\nimport { ThemeToggle } from \"@/hoogin/ui/theme-toggle\"\n\ntype SidebarLayoutProps = {\n  children: React.ReactNode\n  breadcrumb?: React.ReactNode\n  brand: SidebarBrand\n  user?: SidebarUser\n  dataMain: SidebarNavItem[]\n  dataSecondary?: SidebarSecondaryItem[]\n  dataProjects?: SidebarProject[]\n  dataMainLabel?: string\n  dataProjectsLabel?: string\n  dataProjectsMore?: SidebarMore\n  dataUserMenu?: SidebarUserMenu\n  storageKey?: string\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n  className?: string\n}\n\nexport function SidebarLayout({\n  children,\n  breadcrumb,\n  brand,\n  user,\n  dataMain,\n  dataSecondary,\n  dataProjects,\n  dataMainLabel,\n  dataProjectsLabel,\n  dataProjectsMore,\n  dataUserMenu,\n  storageKey,\n  collapsible,\n  className,\n}: SidebarLayoutProps) {\n  const hasNestedItems = dataMain.some((item) =>\n    item.items?.some((sub) => sub.items?.length)\n  )\n\n  return (\n    <TooltipProvider>\n      <SidebarProvider\n        storageKey={storageKey}\n        className={className}\n        style={\n          hasNestedItems\n            ? ({ \"--sidebar-width\": \"20rem\" } as React.CSSProperties)\n            : undefined\n        }\n      >\n        <AppSidebar\n          brand={brand}\n          user={user}\n          dataMain={dataMain}\n          dataSecondary={dataSecondary}\n          dataProjects={dataProjects}\n          dataMainLabel={dataMainLabel}\n          dataProjectsLabel={dataProjectsLabel}\n          dataProjectsMore={dataProjectsMore}\n          dataUserMenu={dataUserMenu}\n          collapsible={collapsible}\n        />\n        <SidebarInset>\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\n                orientation=\"vertical\"\n                className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n              />\n              {breadcrumb}\n            </div>\n            <div className=\"ml-auto flex items-center gap-2 px-4\">\n              <ThemeToggle />\n            </div>\n          </header>\n          <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n            {children}\n          </div>\n        </SidebarInset>\n      </SidebarProvider>\n    </TooltipProvider>\n  )\n}\n",
      "type": "registry:block",
      "target": "hoogin/blocks/sidebar-layout/sidebar-layout.tsx"
    }
  ],
  "type": "registry:block"
}