{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "header-transparent-scroll", "title": "Header — Transparent Over Hero", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/header-transparent-scroll/header-transparent-scroll.component.ts", "content": "// Marketing navbar that starts transparent over the hero and fades in a bordered,\n// blurred surface once the page scrolls, with a nav row, theme-neutral CTA pair,\n// and a mobile sheet. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit, signal } from '@angular/core'\nimport { Layers, LucideAngularModule, Menu, X } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport { UiSheetCloseComponent, UiSheetComponent, UiSheetContentComponent } from '@/ui/sheet/sheet.component'\n\nexport interface HeaderTransparentScrollLink {\n label: string\n href: string\n}\n\nconst links: HeaderTransparentScrollLink[] = [\n { label: 'Product', href: '#product' },\n { label: 'Solutions', href: '#solutions' },\n { label: 'Pricing', href: '#pricing' },\n { label: 'Docs', href: '#docs' },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-header-transparent-scroll, [ui-header-transparent-scroll]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiButtonComponent,\n UiSeparatorComponent,\n UiSheetCloseComponent,\n UiSheetComponent,\n UiSheetContentComponent,\n ],\n template: `\n
\n
\n \n \n Northwind\n \n\n \n\n \n\n
\n \n \n \n
\n
\n
\n Menu\n \n
\n \n
\n
\n \n \n
\n
\n
\n
\n
\n
\n `,\n})\nexport class UiHeaderTransparentScrollComponent implements OnInit, OnDestroy {\n protected readonly Layers = Layers\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 scrolled = signal(false)\n readonly mobileOpen = signal(false)\n\n private readonly onScroll = (): void => {\n this.scrolled.set(window.scrollY > 24)\n }\n\n ngOnInit(): void {\n // Starts unscrolled so server and first client paint agree; the listener is\n // the only thing that swaps in the solid surface.\n if (typeof window === 'undefined') return\n this.onScroll()\n window.addEventListener('scroll', this.onScroll, { passive: true })\n }\n\n ngOnDestroy(): void {\n if (typeof window === 'undefined') return\n window.removeEventListener('scroll', this.onScroll)\n }\n\n get rootClass(): string {\n return cn(\n 'fixed inset-x-0 top-0 z-40 transition-colors duration-200',\n this.scrolled() ? 'border-border bg-background/85 border-b backdrop-blur' : 'border-b border-transparent',\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-transparent-scroll/header-transparent-scroll.component.ts" }, { "path": "packages/registry-angular/blocks/header-transparent-scroll/index.ts", "content": "export {\n UiHeaderTransparentScrollComponent,\n type HeaderTransparentScrollLink,\n} from './header-transparent-scroll.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/header-transparent-scroll/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/sheet.json" ], "description": "Marketing navbar that starts transparent over the hero and fades in a bordered, blurred surface once the page scrolls, with a nav row, theme-neutral CTA pair, and a mobile sheet.", "categories": [ "marketing" ], "deprecated": true, "replacedBy": "header" }