{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "header-01",
  "title": "Sticky Top Navbar",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/header-01/header-01.component.ts",
      "content": "// Sticky marketing top-bar: brand mark left, five inline anchor links centre on\n// desktop, \"Sign in\" + primary trial CTA right. Below md the right side collapses\n// into a hamburger opening a right-side sheet with the same links and CTAs stacked.\n// Translucent background uses backdrop-blur so content scrolls behind it.\n// Port of the Vue/React block 1:1 — same links, same copy, same sheet behaviour.\nimport { ChangeDetectionStrategy, Component, Input, signal } from '@angular/core'\nimport { Boxes, LucideAngularModule, Menu, X } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiSheetCloseComponent, UiSheetComponent, UiSheetContentComponent } from '@/ui/sheet/sheet.component'\n\nexport interface Header01Link {\n  label: string\n  href: string\n}\n\nconst links: Header01Link[] = [\n  { label: 'Features', href: '#features' },\n  { label: 'Pricing', href: '#pricing' },\n  { label: 'Customers', href: '#customers' },\n  { label: 'Docs', href: '#docs' },\n  { label: 'Blog', href: '#blog' },\n]\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-header-01, [ui-header-01]',\n  standalone: true,\n  // The block renders its own <header>: keep this wrapper out of the layout.\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [LucideAngularModule, UiButtonComponent, UiSheetCloseComponent, UiSheetComponent, UiSheetContentComponent],\n  template: `\n    <header data-slot=\"header-01\" [class]=\"rootClass\">\n      <div class=\"mx-auto flex h-16 max-w-6xl items-center justify-between px-6\">\n        <a href=\"#\" class=\"flex items-center gap-2\">\n          <div class=\"bg-primary text-primary-foreground flex size-8 items-center justify-center rounded-md\">\n            <lucide-icon [img]=\"Boxes\" class=\"size-4\" />\n          </div>\n          <span class=\"text-base font-semibold\">Acme</span>\n        </a>\n\n        <nav class=\"hidden items-center gap-6 md:flex\" aria-label=\"Primary\">\n          @for (link of navLinks; track link.href) {\n            <a [href]=\"link.href\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">\n              {{ link.label }}\n            </a>\n          }\n        </nav>\n\n        <div class=\"hidden items-center gap-2 md:flex\">\n          <button ui-button variant=\"ghost\" size=\"sm\">Sign in</button>\n          <button ui-button size=\"sm\">Start free trial</button>\n        </div>\n\n        <div ui-sheet [open]=\"mobileOpen()\" (openChange)=\"mobileOpen.set($event)\">\n          <button\n            ui-button\n            variant=\"ghost\"\n            size=\"icon\"\n            class=\"md:hidden\"\n            aria-label=\"Open menu\"\n            (click)=\"mobileOpen.set(true)\"\n          >\n            <lucide-icon [img]=\"Menu\" class=\"size-5\" />\n          </button>\n          <div ui-sheet-content side=\"right\" class=\"w-72\">\n            <div class=\"flex h-full flex-col\">\n              <div class=\"flex items-center justify-between border-b px-4 py-3\">\n                <div class=\"flex items-center gap-2\">\n                  <div class=\"bg-primary text-primary-foreground flex size-7 items-center justify-center rounded-md\">\n                    <lucide-icon [img]=\"Boxes\" class=\"size-3.5\" />\n                  </div>\n                  <span class=\"text-sm font-semibold\">Acme</span>\n                </div>\n                <button ui-button ui-sheet-close variant=\"ghost\" size=\"icon\" class=\"size-8\" aria-label=\"Close menu\">\n                  <lucide-icon [img]=\"X\" class=\"size-4\" />\n                </button>\n              </div>\n              <nav class=\"flex flex-1 flex-col gap-1 p-4\" aria-label=\"Mobile\">\n                @for (link of navLinks; track link.href) {\n                  <a\n                    [href]=\"link.href\"\n                    class=\"hover:bg-muted rounded-md px-3 py-2 text-sm transition-colors\"\n                    (click)=\"mobileOpen.set(false)\"\n                  >\n                    {{ link.label }}\n                  </a>\n                }\n              </nav>\n              <div class=\"flex flex-col gap-2 border-t p-4\">\n                <button ui-button variant=\"outline\" class=\"w-full\">Sign in</button>\n                <button ui-button class=\"w-full\">Start free trial</button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </header>\n  `,\n})\nexport class UiHeader01Component {\n  protected readonly Boxes = Boxes\n  protected readonly Menu = Menu\n  protected readonly X = X\n\n  protected readonly navLinks = links\n\n  @Input('class') className?: string\n\n  readonly mobileOpen = signal(false)\n\n  get rootClass(): string {\n    return cn(\n      'bg-background/80 supports-[backdrop-filter]:bg-background/60 sticky top-0 z-40 border-b backdrop-blur',\n      this.className,\n    )\n  }\n\n  closeMobile(): void {\n    this.mobileOpen.set(false)\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/header-01/header-01.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/header-01/index.ts",
      "content": "export { UiHeader01Component, type Header01Link } from './header-01.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/header-01/index.ts"
    }
  ],
  "dependencies": [
    "lucide-angular"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/button.json",
    "https://uipkge.dev/r/angular/sheet.json"
  ],
  "description": "Sticky marketing top-bar. Brand mark on the left, five inline anchor links in the centre on desktop, \"Sign in\" + primary trial CTA on the right. Below the md breakpoint the right side collapses into a hamburger that opens a right-side Sheet with the same links and CTAs stacked. Translucent background uses backdrop-blur so content can scroll behind it.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "header"
}