{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "sidebar-04",
  "title": "Floating Inset Sidebar",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/sidebar-04/sidebar-04.component.ts",
      "content": "// Floating sidebar variant: rounded corners and inset margins via variant=\"floating\",\n// SidebarMenuSub for nested routes. Sample data inlined so consumers edit routes in place.\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component } from '@angular/core'\nimport {\n  UiSidebarComponent,\n  UiSidebarContentComponent,\n  UiSidebarGroupComponent,\n  UiSidebarHeaderComponent,\n  UiSidebarMenuButtonComponent,\n  UiSidebarMenuComponent,\n  UiSidebarMenuItemComponent,\n  UiSidebarMenuSubButtonComponent,\n  UiSidebarMenuSubComponent,\n  UiSidebarMenuSubItemComponent,\n} from '@/ui/sidebar/sidebar.component'\n\ntype NavChild = { title: string; url: string; isActive?: boolean }\ntype NavItem = { title: string; url: string; isActive?: boolean; items: NavChild[] }\n\n// This is sample data.\nconst data: { navMain: NavItem[] } = {\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        { title: 'Installation', url: '#' },\n        { title: 'Project Structure', url: '#' },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        { title: 'Routing', url: '#' },\n        { title: 'Data Fetching', url: '#', isActive: true },\n        { title: 'Rendering', url: '#' },\n        { title: 'Caching', url: '#' },\n        { title: 'Styling', url: '#' },\n        { title: 'Optimizing', url: '#' },\n        { title: 'Configuring', url: '#' },\n        { title: 'Testing', url: '#' },\n        { title: 'Authentication', url: '#' },\n        { title: 'Deploying', url: '#' },\n        { title: 'Upgrading', url: '#' },\n        { title: 'Examples', url: '#' },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        { title: 'Components', url: '#' },\n        { title: 'File Conventions', url: '#' },\n        { title: 'Functions', url: '#' },\n        { title: 'next.config.js Options', url: '#' },\n        { title: 'CLI', url: '#' },\n        { title: 'Edge Runtime', url: '#' },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        { title: 'Accessibility', url: '#' },\n        { title: 'Fast Refresh', url: '#' },\n        { title: 'Next.js Compiler', url: '#' },\n        { title: 'Supported Browsers', url: '#' },\n        { title: 'Turbopack', url: '#' },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [{ title: 'Contribution Guide', url: '#' }],\n    },\n  ],\n}\n\n/**\n * Sidebar04 -- the React block, 1:1: a `variant=\"floating\"` Sidebar with a brand row\n * and nested submenu routes. It reads the surrounding <ui-sidebar-provider> (pair\n * with <ui-sidebar-inset> + <ui-sidebar-trigger>). Edit `data` to change routes.\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-sidebar-04, [ui-sidebar-04]',\n  standalone: true,\n  // React renders <Sidebar> itself: keep this wrapper out of the provider's flex layout.\n  host: { class: 'contents' },\n  imports: [\n    UiSidebarComponent,\n    UiSidebarHeaderComponent,\n    UiSidebarContentComponent,\n    UiSidebarGroupComponent,\n    UiSidebarMenuComponent,\n    UiSidebarMenuItemComponent,\n    UiSidebarMenuButtonComponent,\n    UiSidebarMenuSubComponent,\n    UiSidebarMenuSubItemComponent,\n    UiSidebarMenuSubButtonComponent,\n  ],\n  template: `\n    <ui-sidebar variant=\"floating\">\n      <ui-sidebar-header>\n        <ul ui-sidebar-menu>\n          <li ui-sidebar-menu-item>\n            <a ui-sidebar-menu-button size=\"lg\" href=\"#\">\n              <div\n                class=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\"\n              >\n                <svg viewBox=\"0 0 24 24\" class=\"size-4\" fill=\"currentColor\" aria-hidden=\"true\">\n                  <rect x=\"2\" y=\"2\" width=\"9\" height=\"9\" rx=\"1.5\" />\n                  <rect x=\"13\" y=\"2\" width=\"9\" height=\"9\" rx=\"1.5\" opacity=\"0.55\" />\n                  <rect x=\"2\" y=\"13\" width=\"9\" height=\"9\" rx=\"1.5\" opacity=\"0.55\" />\n                  <rect x=\"13\" y=\"13\" width=\"9\" height=\"9\" rx=\"1.5\" />\n                </svg>\n              </div>\n              <div class=\"flex flex-col gap-0.5 leading-none\">\n                <span class=\"font-medium\">uipkge</span>\n                <span class=\"\">v1.0.0</span>\n              </div>\n            </a>\n          </li>\n        </ul>\n      </ui-sidebar-header>\n      <ui-sidebar-content>\n        <ui-sidebar-group>\n          <ul ui-sidebar-menu class=\"gap-2\">\n            @for (item of data.navMain; track item.title) {\n              <li ui-sidebar-menu-item>\n                <a ui-sidebar-menu-button [href]=\"item.url\" [isActive]=\"!!item.isActive\" class=\"font-medium\">\n                  <span>{{ item.title }}</span>\n                </a>\n                @if (item.items.length) {\n                  <ul ui-sidebar-menu-sub class=\"ml-0 border-l-0 px-1.5\">\n                    @for (childItem of item.items; track childItem.title) {\n                      <li ui-sidebar-menu-sub-item>\n                        <a ui-sidebar-menu-sub-button [href]=\"childItem.url\" [isActive]=\"!!childItem.isActive\">\n                          <span>{{ childItem.title }}</span>\n                        </a>\n                      </li>\n                    }\n                  </ul>\n                }\n              </li>\n            }\n          </ul>\n        </ui-sidebar-group>\n      </ui-sidebar-content>\n    </ui-sidebar>\n  `,\n})\nexport class UiSidebar04Component {\n  readonly data = data\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/sidebar-04/sidebar-04.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/sidebar-04/index.ts",
      "content": "export { UiSidebar04Component } from './sidebar-04.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/sidebar-04/index.ts"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/sidebar.json"
  ],
  "description": "Floating sidebar variant with rounded corners and inset margins. Uses Sidebar variant=\"floating\" and SidebarMenuSub for nested routes. Sample data inlined so consumers edit routes in place.",
  "categories": [
    "layout",
    "sidebar"
  ]
}