hostbbq-monitoring/ng/src/app/app.component.html

<app-header></app-header>

<div class="container pt-5 d-flex flex-row">
  <ul class="nav flex-column">
    <li>
      <div class="card" style="min-width: 200px">
        <div class="card-header btn btn-toolbar bg-primary text-light" routerLink="/">
          <fa-icon [icon]="fa.faChalkboard" class="pe-2"></fa-icon>
          <span class="flex-fill text-start">Dashboard</span>
          <fa-icon [icon]="fa.faAngleRight"></fa-icon>
        </div>
      </div>
    </li>
    <li *ngFor="let server of serverConfigs">
      <div class="card">
        <div class="card-header btn btn-toolbar bg-primary text-light" [routerLink]="'/srv/' + server.id">
          <fa-icon [icon]="fa.faServer" class="pe-2"></fa-icon>
          <span class="flex-fill text-start">{{ server.title }}</span>
          <fa-icon [icon]="fa.faAngleRight" class="caret-rotate"></fa-icon>
        </div>
        <div class="card-body" aria-expanded="true">
          <h5 class="border-bottom pb-2">Server metrics:</h5>
          <ul class="nav flex-column">
            <li *ngFor="let type of server.types" class="nav-item list-unstyled">
              <fa-icon [icon]="type.type | faType" class="pe-2"></fa-icon>{{ type.type }}
              <ul *ngIf="type.subtypes?.length" class="nav flex-column ps-4">
                <li *ngFor="let sub of type.subtypes" class="nav-item list-unstyled">
                  <fa-icon [icon]="type.type | faType" class="pe-2"></fa-icon>{{ sub.type }}
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </li>
  </ul>

  <div class="flex-fill ps-3">
    <router-outlet></router-outlet>
  </div>
</div>