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

<app-header></app-header>

<div class="container pt-5">
  <ul class="nav flex-row">
    <li class="flex-fill">
      <div class="card h-100">
        <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 [class.hidden]="currentUrl !== '/'" [icon]="fa.faAngleDown" class="ps-2"></fa-icon>
        </div>
        <div class="card-body p-1">- soon come -</div>
      </div>
    </li>
    <li *ngFor="let server of serverConfigs" class="flex-fill">
      <div class="card h-100">
        <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 [class.hidden]="currentUrl !== '/srv/' + server.id" [icon]="fa.faAngleDown" class="ps-2"></fa-icon>
        </div>
        <div class="card-body p-1" aria-expanded="true">
          <div *ngFor="let type of server.types" class="badge bg-primary me-1">
            <div class="d-flex flex-column">
              <div class="d-flex flex-row text-uppercase"><fa-icon [icon]="type.type | faType" class="pe-2 status-ok"></fa-icon>{{ type.type }}</div>
              <ul *ngIf="type.subtypes" class="list-unstyled text-start subtypes-list">
                <li *ngFor="let sub of type.subtypes" class="status-ok">
                  {{ sub.type }}
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </li>
  </ul>

  <div class="pt-3">
    <router-outlet></router-outlet>
  </div>
</div>