import { Component, signal } from '@angular/core'; import { CommonModule } from '@angular/common'; import { LandingHeaderComponent, CTAButton, LandingHeaderConfig, NavigationItem } from 'ui-landing-pages'; import { ButtonComponent, VStackComponent, SectionComponent } from 'ui-essentials'; @Component({ selector: 'app-landing-header-demo', standalone: true, imports: [CommonModule, LandingHeaderComponent, ButtonComponent, VStackComponent, SectionComponent], template: `

Landing Header - Light Theme

Sticky navigation header with transparent background that becomes solid on scroll.

Landing Header - Dark Theme

Dark theme version with logo and mega menu navigation.

Landing Header - With Dropdown Menu

Header with dropdown navigation and badges.

Configuration Options

Toggle Transparent: {{ lightHeaderConfig().transparent ? 'ON' : 'OFF' }} Toggle Sticky: {{ lightHeaderConfig().sticky ? 'ON' : 'OFF' }} Toggle Mobile Menu: {{ lightHeaderConfig().showMobileMenu ? 'ON' : 'OFF' }}

Scroll Content

Scroll to see header behavior

More Content

Keep scrolling...
`, styles: [` .demo-controls { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; } .demo-control { min-width: 200px; } :host { display: block; padding-bottom: 2rem; } `] }) export class LandingHeaderDemoComponent { lightHeaderConfig = signal({ logo: { text: 'UI Suite', url: '/' }, navigation: [ { id: 'home', label: 'Home', route: '/', }, { id: 'features', label: 'Features', route: '/features', }, { id: 'pricing', label: 'Pricing', route: '/pricing', }, { id: 'about', label: 'About', route: '/about', }, { id: 'contact', label: 'Contact', route: '/contact', } ], ctaButton: { text: 'Get Started', variant: 'filled', size: 'medium', action: () => alert('CTA clicked!') }, transparent: true, sticky: true, showMobileMenu: true, maxWidth: 'xl', theme: 'light' }); darkHeaderConfig = signal({ logo: { text: 'Dark UI', url: '/' }, navigation: [ { id: 'products', label: 'Products', route: '/products', }, { id: 'solutions', label: 'Solutions', route: '/solutions', }, { id: 'resources', label: 'Resources', route: '/resources', }, { id: 'company', label: 'Company', route: '/company', } ], ctaButton: { text: 'Start Free Trial', variant: 'filled', size: 'medium', icon: '🚀', action: () => alert('Free trial started!') }, transparent: false, sticky: true, showMobileMenu: true, maxWidth: 'xl', theme: 'dark' }); dropdownHeaderConfig = signal({ logo: { text: 'Dropdown Demo', url: '/' }, navigation: [ { id: 'home', label: 'Home', route: '/', }, { id: 'products', label: 'Products', children: [ { id: 'ui-kit', label: 'UI Kit', route: '/products/ui-kit', badge: 'New' }, { id: 'components', label: 'Components', route: '/products/components', }, { id: 'templates', label: 'Templates', route: '/products/templates', badge: 'Pro' } ] }, { id: 'docs', label: 'Documentation', children: [ { id: 'getting-started', label: 'Getting Started', route: '/docs/getting-started', }, { id: 'api', label: 'API Reference', route: '/docs/api', }, { id: 'examples', label: 'Examples', route: '/docs/examples', } ] }, { id: 'support', label: 'Support', route: '/support', badge: '24/7' } ], ctaButton: { text: 'Contact Sales', variant: 'tonal', size: 'medium', action: () => alert('Contact sales clicked!') }, transparent: false, sticky: true, showMobileMenu: true, maxWidth: 'xl', theme: 'light' }); toggleTransparent(): void { const current = this.lightHeaderConfig(); this.lightHeaderConfig.set({ ...current, transparent: !current.transparent }); } toggleSticky(): void { const current = this.lightHeaderConfig(); this.lightHeaderConfig.set({ ...current, sticky: !current.sticky }); } toggleMobileMenu(): void { const current = this.lightHeaderConfig(); this.lightHeaderConfig.set({ ...current, showMobileMenu: !current.showMobileMenu }); } onNavigationClicked(item: NavigationItem): void { console.log('Navigation clicked:', item); } onCTAClicked(cta: CTAButton): void { console.log('CTA clicked:', cta); } }