CUB-122: Scaffold Control Center React frontend

frontend-legacy/src/app/layout/nav-rail/nav-rail.component.html

@@ -0,0 +1,44 @@
+<aside
+  class="nav-rail"
+  [class.nav-rail--expanded]="expanded()"
+  [attr.aria-label]="'Navigation'"
+>
+  <!-- Header with OpenClaw brand -->
+  <div class="nav-rail__header">
+    <button
+      class="nav-rail__toggle"
+      (click)="toggleExpand()"
+      [attr.aria-label]="expanded() ? 'Collapse navigation' : 'Expand navigation'"
+      [attr.aria-expanded]="expanded()"
+    >
+      <mat-icon>menu</mat-icon>
+    </button>
+    @if (expanded()) {
+      <span class="nav-rail__brand">OpenClaw</span>
+    }
+  </div>
+
+  <!-- Navigation destinations -->
+  <nav class="nav-rail__nav">
+    @for (dest of destinations; track dest.route) {
+      <a
+        [routerLink]="dest.route"
+        routerLinkActive="nav-rail__item--active"
+        [attr.aria-label]="dest.label"
+        class="nav-rail__item"
+      >
+        <mat-icon
+          [matBadge]="dest.badge ?? 0"
+          [matBadgeHidden]="!dest.badge"
+          matBadgePosition="above after"
+          matBadgeSize="small"
+        >
+          {{ dest.icon }}
+        </mat-icon>
+        @if (expanded()) {
+          <span class="nav-rail__label">{{ dest.label }}</span>
+        }
+      </a>
+    }
+  </nav>
+</aside>