{
  "name": "layout",
  "type": "registry:component",
  "files": [
    {
      "name": "layout.component.ts",
      "content": "import { ChangeDetectionStrategy, Component, computed, contentChildren, input, ViewEncapsulation } from '@angular/core';\n\nimport type { ClassValue } from 'clsx';\n\nimport { layoutVariants, type LayoutVariants } from '@/shared/components/layout/layout.variants';\nimport { SidebarComponent } from '@/shared/components/layout/sidebar.component';\nimport { mergeClasses } from '@/shared/utils/merge-classes';\n\n@Component({\n  selector: 'z-layout',\n  template: `\n    <ng-content />\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'classes()',\n  },\n  exportAs: 'zLayout',\n})\nexport class LayoutComponent {\n  readonly class = input<ClassValue>('');\n  readonly zDirection = input<LayoutVariants>('auto');\n\n  // Query for direct sidebar children to auto-detect layout direction\n  private readonly sidebars = contentChildren(SidebarComponent, { descendants: false });\n\n  private readonly detectedDirection = computed(() => {\n    if (this.zDirection() !== 'auto') {\n      return this.zDirection();\n    }\n\n    // Auto-detection: Check if there are any sidebar children\n    const hasSidebar = this.sidebars().length > 0;\n    return hasSidebar ? 'horizontal' : 'vertical';\n  });\n\n  protected readonly classes = computed(() =>\n    mergeClasses(\n      layoutVariants({\n        zDirection: this.detectedDirection(),\n      }),\n      this.class(),\n    ),\n  );\n}\n"
    },
    {
      "name": "layout.variants.ts",
      "content": "import { cva, type VariantProps } from 'class-variance-authority';\n\n// Layout Variants\nexport const layoutVariants = cva('flex w-full min-h-0', {\n  variants: {\n    zDirection: {\n      horizontal: 'flex-row',\n      vertical: 'flex-col',\n      auto: 'flex-col',\n    },\n  },\n  defaultVariants: {\n    zDirection: 'auto',\n  },\n});\nexport type LayoutVariants = NonNullable<VariantProps<typeof layoutVariants>['zDirection']>;\n\n// Header Variants\nexport const headerVariants = cva('flex items-center px-4 bg-background border-b border-border shrink-0', {\n  variants: {},\n});\n\n// Footer Variants\nexport const footerVariants = cva('flex items-center px-6 bg-background border-t border-border shrink-0', {\n  variants: {},\n});\n\n// Content Variants\nexport const contentVariants = cva('flex-1 flex flex-col overflow-auto bg-background p-6 min-h-dvh');\n\n// Sidebar Variants\nexport const sidebarVariants = cva(\n  'relative flex flex-col h-full transition-all duration-300 ease-in-out border-r shrink-0 p-6 bg-sidebar text-sidebar-foreground border-sidebar-border',\n);\n\nexport const sidebarTriggerVariants = cva(\n  'absolute bottom-4 z-10 flex items-center justify-center cursor-pointer rounded-sm border border-sidebar-border bg-sidebar hover:bg-sidebar-accent transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring focus-visible:ring-offset-2 size-6 -right-3',\n);\n\n// Sidebar Group Variants\nexport const sidebarGroupVariants = cva('flex flex-col gap-1');\n\nexport const sidebarGroupLabelVariants = cva(\n  'flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 focus-visible:ring-sidebar-ring [&>svg]:size-4 [&>svg]:shrink-0',\n);\n"
    },
    {
      "name": "content.component.ts",
      "content": "import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';\n\nimport type { ClassValue } from 'clsx';\n\nimport { contentVariants } from '@/shared/components/layout/layout.variants';\nimport { mergeClasses } from '@/shared/utils/merge-classes';\n\n@Component({\n  selector: 'z-content',\n  template: `\n    <main>\n      <ng-content />\n    </main>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'classes()',\n  },\n  exportAs: 'zContent',\n})\nexport class ContentComponent {\n  readonly class = input<ClassValue>('');\n\n  protected readonly classes = computed(() => mergeClasses(contentVariants(), this.class()));\n}\n"
    },
    {
      "name": "footer.component.ts",
      "content": "import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';\n\nimport type { ClassValue } from 'clsx';\n\nimport { footerVariants } from '@/shared/components/layout/layout.variants';\nimport { mergeClasses } from '@/shared/utils/merge-classes';\n\n@Component({\n  selector: 'z-footer',\n  template: `\n    <footer [class]=\"classes()\" [style.height.px]=\"zHeight()\">\n      <ng-content />\n    </footer>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  exportAs: 'zFooter',\n})\nexport class FooterComponent {\n  readonly class = input<ClassValue>('');\n  readonly zHeight = input<number>(64);\n\n  protected readonly classes = computed(() => mergeClasses(footerVariants(), this.class()));\n}\n"
    },
    {
      "name": "header.component.ts",
      "content": "import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';\n\nimport type { ClassValue } from 'clsx';\n\nimport { headerVariants } from '@/shared/components/layout/layout.variants';\nimport { mergeClasses } from '@/shared/utils/merge-classes';\n\n@Component({\n  selector: 'z-header',\n  template: `\n    <header [class]=\"classes()\" [style.height.px]=\"zHeight()\">\n      <ng-content />\n    </header>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  exportAs: 'zHeader',\n})\nexport class HeaderComponent {\n  readonly class = input<ClassValue>('');\n  readonly zHeight = input<number>(64);\n\n  protected readonly classes = computed(() => mergeClasses(headerVariants(), this.class()));\n}\n"
    },
    {
      "name": "layout.imports.ts",
      "content": "import { ContentComponent } from '@/shared/components/layout/content.component';\nimport { FooterComponent } from '@/shared/components/layout/footer.component';\nimport { HeaderComponent } from '@/shared/components/layout/header.component';\nimport { LayoutComponent } from '@/shared/components/layout/layout.component';\nimport {\n  SidebarComponent,\n  SidebarGroupComponent,\n  SidebarGroupLabelComponent,\n} from '@/shared/components/layout/sidebar.component';\n\nexport const LayoutImports = [\n  LayoutComponent,\n  HeaderComponent,\n  FooterComponent,\n  ContentComponent,\n  SidebarComponent,\n  SidebarGroupComponent,\n  SidebarGroupLabelComponent,\n] as const;\n"
    },
    {
      "name": "sidebar.component.ts",
      "content": "import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  effect,\n  input,\n  output,\n  signal,\n  ViewEncapsulation,\n  type TemplateRef,\n} from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideChevronLeft, lucideChevronRight } from '@ng-icons/lucide';\nimport type { ClassValue } from 'clsx';\n\nimport {\n  sidebarGroupLabelVariants,\n  sidebarGroupVariants,\n  sidebarTriggerVariants,\n  sidebarVariants,\n} from '@/shared/components/layout/layout.variants';\nimport { ZardStringTemplateOutletDirective } from '@/shared/core/directives/string-template-outlet/string-template-outlet.directive';\nimport { mergeClasses } from '@/shared/utils/merge-classes';\n\n@Component({\n  selector: 'z-sidebar',\n  imports: [ZardStringTemplateOutletDirective, NgIcon],\n  template: `\n    <aside [class]=\"classes()\" [style.width.px]=\"currentWidth()\" [attr.data-collapsed]=\"zCollapsed()\">\n      <div class=\"flex-1 overflow-auto\">\n        <ng-content />\n      </div>\n\n      @if (zCollapsible() && !zTrigger()) {\n        <div\n          [class]=\"triggerClasses()\"\n          (click)=\"toggleCollapsed()\"\n          (keydown.{enter,space}.prevent)=\"toggleCollapsed()\"\n          tabindex=\"0\"\n          role=\"button\"\n          [attr.aria-label]=\"zCollapsed() ? 'Expand sidebar' : 'Collapse sidebar'\"\n          [attr.aria-expanded]=\"!zCollapsed()\"\n        >\n          <ng-icon [name]=\"chevronIcon()\" class=\"pointer-events-none size-4! shrink-0\" />\n        </div>\n      }\n\n      @if (zCollapsible() && zTrigger()) {\n        <ng-container *zStringTemplateOutlet=\"zTrigger()\" />\n      }\n    </aside>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  viewProviders: [provideIcons({ lucideChevronRight, lucideChevronLeft })],\n  exportAs: 'zSidebar',\n})\nexport class SidebarComponent {\n  readonly zWidth = input<string | number>(200);\n  readonly zCollapsedWidth = input<number>(64);\n  readonly zCollapsible = input(false, { transform: booleanAttribute });\n  readonly zCollapsed = input(false, { transform: booleanAttribute });\n  readonly zReverseArrow = input(false, { transform: booleanAttribute });\n  readonly zTrigger = input<TemplateRef<void> | null>(null);\n  readonly class = input<ClassValue>('');\n\n  readonly zCollapsedChange = output<boolean>();\n\n  private readonly internalCollapsed = signal(false);\n\n  constructor() {\n    effect(() => {\n      this.internalCollapsed.set(this.zCollapsed());\n    });\n  }\n\n  protected readonly currentWidth = computed(() => {\n    const collapsed = this.zCollapsed();\n    if (collapsed) {\n      return this.zCollapsedWidth();\n    }\n\n    const width = this.zWidth();\n    return typeof width === 'number' ? width : parseInt(width, 10);\n  });\n\n  protected readonly chevronIcon = computed((): string => {\n    const collapsed = this.zCollapsed();\n    const reverse = this.zReverseArrow();\n    const icons = ['lucideChevronLeft', 'lucideChevronRight'];\n\n    if (reverse) {\n      return collapsed ? icons[0] : icons[1];\n    }\n    return collapsed ? icons[1] : icons[0];\n  });\n\n  protected readonly classes = computed(() => mergeClasses(sidebarVariants(), this.class()));\n\n  protected readonly triggerClasses = computed(() => mergeClasses(sidebarTriggerVariants()));\n\n  toggleCollapsed(): void {\n    const newState = !this.zCollapsed();\n    this.internalCollapsed.set(newState);\n    this.zCollapsedChange.emit(newState);\n  }\n}\n\n@Component({\n  selector: 'z-sidebar-group',\n  template: `\n    <div [class]=\"classes()\">\n      <ng-content />\n    </div>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  exportAs: 'zSidebarGroup',\n})\nexport class SidebarGroupComponent {\n  readonly class = input<ClassValue>('');\n\n  protected readonly classes = computed(() => mergeClasses(sidebarGroupVariants(), this.class()));\n}\n\n@Component({\n  selector: 'z-sidebar-group-label',\n  template: `\n    <div [class]=\"classes()\">\n      <ng-content />\n    </div>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  exportAs: 'zSidebarGroupLabel',\n})\nexport class SidebarGroupLabelComponent {\n  readonly class = input<ClassValue>('');\n\n  protected readonly classes = computed(() => mergeClasses(sidebarGroupLabelVariants(), this.class()));\n}\n"
    },
    {
      "name": "index.ts",
      "content": "export * from '@/shared/components/layout/layout.component';\nexport * from '@/shared/components/layout/header.component';\nexport * from '@/shared/components/layout/footer.component';\nexport * from '@/shared/components/layout/content.component';\nexport * from '@/shared/components/layout/sidebar.component';\nexport * from '@/shared/components/layout/layout.variants';\nexport * from '@/shared/components/layout/layout.imports';\n"
    }
  ],
  "demos": [
    {
      "name": "basic.ts",
      "content": "import { ChangeDetectionStrategy, Component } from '@angular/core';\n\nimport { LayoutImports } from '@/shared/components/layout/layout.imports';\n\n@Component({\n  selector: 'z-demo-layout-basic',\n  imports: [LayoutImports],\n  template: `\n    <div class=\"flex flex-col gap-6 text-center\">\n      <z-layout class=\"overflow-hidden rounded-lg\">\n        <z-header class=\"h-16 justify-center border-0 bg-[#4096ff] px-12 text-white\">Header</z-header>\n        <z-content class=\"min-h-50 bg-[#0958d9] text-white\">Content</z-content>\n        <z-footer class=\"h-16 justify-center border-0 bg-[#4096ff] px-12 text-white\">Footer</z-footer>\n      </z-layout>\n\n      <z-layout class=\"overflow-hidden rounded-lg\">\n        <z-header class=\"h-16 justify-center border-0 bg-[#4096ff] px-12 text-white\">Header</z-header>\n        <z-layout>\n          <z-sidebar class=\"border-0 bg-[#1677ff] text-white\" [zWidth]=\"120\">Sidebar</z-sidebar>\n          <z-content class=\"min-h-50 bg-[#0958d9] text-white\">Content</z-content>\n        </z-layout>\n        <z-footer class=\"h-16 justify-center border-0 bg-[#4096ff] px-12 text-white\">Footer</z-footer>\n      </z-layout>\n\n      <z-layout class=\"overflow-hidden rounded-lg\">\n        <z-header class=\"h-16 justify-center border-0 bg-[#4096ff] px-12 text-white\">Header</z-header>\n        <z-layout>\n          <z-content class=\"min-h-50 bg-[#0958d9] text-white\">Content</z-content>\n          <z-sidebar class=\"border-0 bg-[#1677ff] text-white\" [zWidth]=\"120\">Sidebar</z-sidebar>\n        </z-layout>\n        <z-footer class=\"h-16 justify-center border-0 bg-[#4096ff] px-12 text-white\">Footer</z-footer>\n      </z-layout>\n\n      <z-layout class=\"overflow-hidden rounded-lg\">\n        <z-sidebar class=\"border-0 bg-[#1677ff] text-white\" [zWidth]=\"120\">Sidebar</z-sidebar>\n        <z-layout>\n          <z-header class=\"h-16 justify-center border-0 bg-[#4096ff] px-12 text-white\">Header</z-header>\n          <z-content class=\"min-h-50 bg-[#0958d9] text-white\">Content</z-content>\n          <z-footer class=\"h-16 justify-center border-0 bg-[#4096ff] px-12 text-white\">Footer</z-footer>\n        </z-layout>\n      </z-layout>\n    </div>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class LayoutDemoBasicComponent {}\n"
    },
    {
      "name": "full-layout.ts",
      "content": "import { NgOptimizedImage } from '@angular/common';\nimport { ChangeDetectionStrategy, Component } from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideBell, lucideHouse, lucideLayers, lucideSearch, lucideUsers } from '@ng-icons/lucide';\n\nimport { ZardButtonComponent } from '@/shared/components/button';\nimport { LayoutImports } from '@/shared/components/layout/layout.imports';\nimport { ZardSkeletonComponent } from '@/shared/components/skeleton';\n\n@Component({\n  selector: 'z-demo-layout-full',\n  imports: [LayoutImports, ZardButtonComponent, ZardSkeletonComponent, NgOptimizedImage, NgIcon],\n  template: `\n    <z-layout class=\"min-h-150 overflow-hidden rounded-md border\">\n      <z-header>\n        <div class=\"flex w-full items-center justify-between\">\n          <div class=\"flex items-center text-lg font-semibold\">\n            <img ngSrc=\"images/zard.svg\" class=\"dark:invert\" alt=\"Logo\" width=\"24\" height=\"24\" />\n            <span class=\"ml-2\">ZardUI</span>\n          </div>\n          <div class=\"flex items-center gap-2\">\n            <button type=\"button\" z-button zType=\"ghost\" zSize=\"sm\">\n              <ng-icon name=\"lucideSearch\" />\n            </button>\n            <button type=\"button\" z-button zType=\"ghost\" zSize=\"sm\">\n              <ng-icon name=\"lucideBell\" />\n            </button>\n          </div>\n        </div>\n      </z-header>\n\n      <z-layout>\n        <z-sidebar [zWidth]=\"200\" class=\"p-0!\">\n          <nav class=\"flex h-full flex-col gap-2 p-4\">\n            <z-sidebar-group>\n              <z-sidebar-group-label>Menu</z-sidebar-group-label>\n              <button type=\"button\" z-button zType=\"secondary\" class=\"justify-start\">\n                <ng-icon name=\"lucideHouse\" class=\"mr-2\" />\n                Dashboard\n              </button>\n              <button type=\"button\" z-button zType=\"ghost\" class=\"justify-start\">\n                <ng-icon name=\"lucideLayers\" class=\"mr-2\" />\n                Projects\n              </button>\n              <button type=\"button\" z-button zType=\"ghost\" class=\"justify-start\">\n                <ng-icon name=\"lucideUsers\" class=\"mr-2\" />\n                Team\n              </button>\n            </z-sidebar-group>\n          </nav>\n        </z-sidebar>\n\n        <z-layout>\n          <z-content class=\"min-h-50\">\n            <div class=\"space-y-4\">\n              <z-skeleton class=\"h-32 w-full\" />\n              <z-skeleton class=\"h-48 w-full\" />\n              <z-skeleton class=\"h-24 w-full\" />\n            </div>\n          </z-content>\n\n          <z-footer>\n            <div class=\"text-muted-foreground flex w-full items-center justify-center text-sm\">© {{ year }} ZardUI</div>\n          </z-footer>\n        </z-layout>\n      </z-layout>\n    </z-layout>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  viewProviders: [\n    provideIcons({\n      lucideSearch,\n      lucideBell,\n      lucideHouse,\n      lucideLayers,\n      lucideUsers,\n    }),\n  ],\n})\nexport class LayoutDemoFullComponent {\n  year = new Date().getFullYear();\n}\n"
    },
    {
      "name": "sidebar.ts",
      "content": "import { Component, signal } from '@angular/core';\n\nimport { NgIcon, provideIcons, type IconName } from '@ng-icons/core';\nimport {\n  lucideCalendar,\n  lucideChevronRight,\n  lucideChevronsUpDown,\n  lucideFolder,\n  lucideHouse,\n  lucideInbox,\n  lucideLogOut,\n  lucidePanelLeft,\n  lucideSearch,\n  lucideSettings,\n  lucideUser,\n} from '@ng-icons/lucide';\n\nimport { ZardAvatarComponent } from '@/shared/components/avatar';\nimport { ZardBreadcrumbImports } from '@/shared/components/breadcrumb/breadcrumb.imports';\nimport { ZardButtonComponent } from '@/shared/components/button';\nimport { LayoutImports } from '@/shared/components/layout/layout.imports';\nimport { ZardMenuImports } from '@/shared/components/menu/menu.imports';\nimport { ZardSeparatorComponent } from '@/shared/components/separator';\nimport { ZardSkeletonComponent } from '@/shared/components/skeleton';\nimport { ZardTooltipImports } from '@/shared/components/tooltip';\n\ninterface MenuItem {\n  icon: IconName;\n  label: string;\n  submenu?: { label: string }[];\n}\n\n@Component({\n  selector: 'z-demo-layout-collapsible',\n  imports: [\n    LayoutImports,\n    ZardButtonComponent,\n    ZardBreadcrumbImports,\n    ZardMenuImports,\n    ZardSkeletonComponent,\n    ZardTooltipImports,\n    ZardSeparatorComponent,\n    ZardAvatarComponent,\n    NgIcon,\n  ],\n  template: `\n    <!-- border and rounded-md are just for the demo purpose -->\n    <z-layout class=\"overflow-hidden rounded-md border\">\n      <z-sidebar\n        [zWidth]=\"250\"\n        [zCollapsible]=\"true\"\n        [zCollapsed]=\"sidebarCollapsed()\"\n        [zCollapsedWidth]=\"70\"\n        (zCollapsedChange)=\"onCollapsedChange($event)\"\n        class=\"p-0!\"\n      >\n        <nav [class]=\"'flex h-full flex-col overflow-hidden ' + (sidebarCollapsed() ? 'gap-1 p-1 pt-4' : 'gap-4 p-4')\">\n          <z-sidebar-group>\n            @if (!sidebarCollapsed()) {\n              <z-sidebar-group-label>Main</z-sidebar-group-label>\n            }\n            @for (item of mainMenuItems; track item.label) {\n              <button\n                type=\"button\"\n                z-button\n                zType=\"ghost\"\n                [class]=\"sidebarCollapsed() ? 'justify-center' : 'justify-start'\"\n                [zTooltip]=\"sidebarCollapsed() ? item.label : ''\"\n                zPosition=\"right\"\n              >\n                <ng-icon [name]=\"item.icon\" [class]=\"sidebarCollapsed() ? '' : 'mr-2'\" />\n                @if (!sidebarCollapsed()) {\n                  <span>{{ item.label }}</span>\n                }\n              </button>\n            }\n          </z-sidebar-group>\n\n          <z-sidebar-group>\n            @if (!sidebarCollapsed()) {\n              <z-sidebar-group-label>Workspace</z-sidebar-group-label>\n            }\n            @for (item of workspaceMenuItems; track item.label) {\n              @if (item.submenu) {\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  z-menu\n                  [zMenuTriggerFor]=\"submenu\"\n                  zPlacement=\"rightTop\"\n                  [class]=\"sidebarCollapsed() ? 'justify-center' : 'justify-start'\"\n                  [zTooltip]=\"sidebarCollapsed() ? item.label : null\"\n                  zPosition=\"right\"\n                >\n                  <ng-icon [name]=\"item.icon\" [class]=\"sidebarCollapsed() ? '' : 'mr-2'\" />\n                  @if (!sidebarCollapsed()) {\n                    <span class=\"flex-1 text-left\">{{ item.label }}</span>\n                    <ng-icon name=\"lucideChevronRight\" />\n                  }\n                </button>\n\n                <ng-template #submenu>\n                  <div z-menu-content class=\"w-48\">\n                    @for (subitem of item.submenu; track subitem.label) {\n                      <button type=\"button\" z-menu-item>{{ subitem.label }}</button>\n                    }\n                  </div>\n                </ng-template>\n              } @else {\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  [class]=\"sidebarCollapsed() ? 'justify-center' : 'justify-start'\"\n                  [zTooltip]=\"sidebarCollapsed() ? item.label : ''\"\n                  zPosition=\"right\"\n                >\n                  <ng-icon [name]=\"item.icon\" [class]=\"sidebarCollapsed() ? '' : 'mr-2'\" />\n                  @if (!sidebarCollapsed()) {\n                    <span>{{ item.label }}</span>\n                  }\n                </button>\n              }\n            }\n          </z-sidebar-group>\n\n          <div class=\"mt-auto\">\n            <div\n              z-menu\n              [zMenuTriggerFor]=\"userMenu\"\n              zPlacement=\"rightBottom\"\n              [class]=\"\n                'hover:bg-accent flex cursor-pointer items-center justify-center gap-2 rounded-md ' +\n                (sidebarCollapsed() ? 'm-2 p-0' : 'p-2')\n              \"\n            >\n              <z-avatar zSrc=\"https://zardui.com/images/avatar/imgs/avatar_image.jpg\" zAlt=\"Zard UI\" />\n\n              @if (!sidebarCollapsed()) {\n                <div>\n                  <span class=\"font-medium\">zardui</span>\n                  <div class=\"text-xs\">test&#64;zardui.com</div>\n                </div>\n\n                <ng-icon name=\"lucideChevronsUpDown\" class=\"ml-auto\" />\n              }\n            </div>\n\n            <ng-template #userMenu>\n              <div z-menu-content class=\"w-48\">\n                <button type=\"button\" z-menu-item>\n                  <ng-icon name=\"lucideUser\" class=\"mr-2\" />\n                  Profile\n                </button>\n                <button type=\"button\" z-menu-item>\n                  <ng-icon name=\"lucideSettings\" class=\"mr-2\" />\n                  Settings\n                </button>\n                <z-separator class=\"my-2\" />\n                <button type=\"button\" z-menu-item>\n                  <ng-icon name=\"lucideLogOut\" class=\"mr-2\" />\n                  Logout\n                </button>\n              </div>\n            </ng-template>\n          </div>\n        </nav>\n      </z-sidebar>\n\n      <!-- min-h-[200px] is just for the demo purpose to have a minimum height -->\n      <z-content class=\"min-h-50\">\n        <div class=\"flex items-center\">\n          <button type=\"button\" z-button zType=\"ghost\" zSize=\"sm\" class=\"-ml-2\" (click)=\"toggleSidebar()\">\n            <ng-icon name=\"lucidePanelLeft\" />\n          </button>\n\n          <z-separator zOrientation=\"vertical\" class=\"ml-2 h-4 self-center!\" />\n\n          <z-breadcrumb zWrap=\"wrap\" zAlign=\"start\">\n            <z-breadcrumb-item [routerLink]=\"['/docs/components/layout']\">Home</z-breadcrumb-item>\n            <z-breadcrumb-item>\n              <span aria-current=\"page\">Components</span>\n            </z-breadcrumb-item>\n          </z-breadcrumb>\n        </div>\n\n        <div class=\"space-y-4 py-4\">\n          <z-skeleton class=\"h-80 w-full\" />\n          <z-skeleton class=\"h-16 w-full\" />\n        </div>\n      </z-content>\n    </z-layout>\n  `,\n  viewProviders: [\n    provideIcons({\n      lucideHouse,\n      lucideInbox,\n      lucideFolder,\n      lucideChevronRight,\n      lucideChevronsUpDown,\n      lucideUser,\n      lucideSettings,\n      lucideLogOut,\n      lucidePanelLeft,\n      lucideCalendar,\n      lucideSearch,\n    }),\n  ],\n})\nexport class LayoutDemoSidebarComponent {\n  readonly sidebarCollapsed = signal(false);\n\n  mainMenuItems: MenuItem[] = [\n    { icon: 'lucideHouse', label: 'Home' },\n    { icon: 'lucideInbox', label: 'Inbox' },\n  ];\n\n  workspaceMenuItems: MenuItem[] = [\n    {\n      icon: 'lucideFolder',\n      label: 'Projects',\n      submenu: [{ label: 'Design System' }, { label: 'Mobile App' }, { label: 'Website' }],\n    },\n    { icon: 'lucideCalendar', label: 'Calendar' },\n    { icon: 'lucideSearch', label: 'Search' },\n  ];\n\n  toggleSidebar() {\n    this.sidebarCollapsed.update(collapsed => !collapsed);\n  }\n\n  onCollapsedChange(collapsed: boolean) {\n    this.sidebarCollapsed.set(collapsed);\n  }\n}\n"
    }
  ]
}