53 lines
1.7 KiB
TypeScript
53 lines
1.7 KiB
TypeScript
import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
|
|
import { RouterLink, RouterLinkActive } from '@angular/router';
|
|
import { MatIconModule } from '@angular/material/icon';
|
|
import { MatButtonModule } from '@angular/material/button';
|
|
import { MatChipsModule } from '@angular/material/chips';
|
|
import { MatBadgeModule } from '@angular/material/badge';
|
|
import { NAV_DESTINATIONS } from '../../models/nav.model';
|
|
|
|
/**
|
|
* Adaptive Navigation Component — switches between desktop sidebar
|
|
* and mobile header layouts using CSS media queries.
|
|
*
|
|
* Desktop (≥768px): 72px sidebar with full navigation items.
|
|
* Mobile (<768px): 56px compact header with hamburger menu.
|
|
*
|
|
* The LIVE status indicator is visible in both layouts.
|
|
* Per spec Section 3.1 (kiosk) and 3.2 (mobile).
|
|
*/
|
|
@Component({
|
|
selector: 'app-adaptive-navigation',
|
|
standalone: true,
|
|
imports: [
|
|
RouterLink,
|
|
RouterLinkActive,
|
|
MatIconModule,
|
|
MatButtonModule,
|
|
MatChipsModule,
|
|
MatBadgeModule,
|
|
],
|
|
templateUrl: './adaptive-navigation.component.html',
|
|
styleUrl: './adaptive-navigation.component.scss',
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
})
|
|
export class AdaptiveNavigationComponent {
|
|
/** Navigation destinations shared with other nav components */
|
|
protected readonly destinations = NAV_DESTINATIONS;
|
|
|
|
/** Whether the mobile drawer is open */
|
|
protected readonly mobileMenuOpen = signal(false);
|
|
|
|
/** Live connection status */
|
|
protected readonly isConnected = signal(true);
|
|
|
|
/** Toggle mobile menu */
|
|
toggleMobileMenu(): void {
|
|
this.mobileMenuOpen.update((v) => !v);
|
|
}
|
|
|
|
/** Close mobile menu (e.g. on nav) */
|
|
closeMobileMenu(): void {
|
|
this.mobileMenuOpen.set(false);
|
|
}
|
|
} |