24 lines
965 B
TypeScript
24 lines
965 B
TypeScript
|
import { ChangeDetectionStrategy, Component } from '@angular/core';
|
|||
|
|
import { RouterLink, RouterLinkActive } from '@angular/router';
|
|||
|
|
import { MatIconModule } from '@angular/material/icon';
|
|||
|
|
import { MatBadgeModule } from '@angular/material/badge';
|
|||
|
|
import { NAV_DESTINATIONS } from '../../models/nav.model';
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Bottom Navigation Bar for mobile (compact breakpoint).
|
|||
|
|
* Per spec Section 3.2: M3 NavigationBar, 3–5 destinations,
|
|||
|
|
* active destination uses M3 indicator pill.
|
|||
|
|
* Visible only on compact (< 600px) breakpoint.
|
|||
|
|
*/
|
|||
|
|
@Component({
|
|||
|
|
selector: 'app-bottom-nav',
|
|||
|
|
standalone: true,
|
|||
|
|
imports: [RouterLink, RouterLinkActive, MatIconModule, MatBadgeModule],
|
|||
|
|
templateUrl: './bottom-nav.component.html',
|
|||
|
|
styleUrl: './bottom-nav.component.scss',
|
|||
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|||
|
|
})
|
|||
|
|
export class BottomNavComponent {
|
|||
|
|
/** Show only first 5 destinations on bottom nav */
|
|||
|
|
protected readonly destinations = NAV_DESTINATIONS.slice(0, 5);
|
|||
|
|
}
|