CUB-122: Scaffold Control Center React frontend

frontend-legacy/src/app/layout/bottom-nav/bottom-nav.component.ts

@@ -0,0 +1,24 @@
+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);
+}