<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>