allerta-vvf/frontend/src/app/app.component.html

<div [className]="menuButtonClicked ? 'topnav responsive' : 'topnav'" id="topNavBar" *ngIf="auth.profile.id !== undefined">
  <a routerLinkActive="active" (click)="menuButtonClicked = false" routerLink="/list" translate>menu.list</a>
  <a routerLinkActive="active" (click)="menuButtonClicked = false" routerLink="/services" translate>menu.services</a>
  <a routerLinkActive="active" (click)="menuButtonClicked = false" routerLink="/trainings" translate>menu.trainings</a>
  <a routerLinkActive="active" (click)="menuButtonClicked = false" routerLink="/logs" translate>menu.logs</a>
  <a *ngIf="auth.profile.can('admin-read')" routerLinkActive="active" (click)="menuButtonClicked = false" routerLink="/admin" translate>menu.admin</a>
  <a style="float: right;" id="logout" routerLinkActive="active" [routerLink]="auth.profile.profilePageLink">{{ 'menu.hi'|translate|ftitlecase }}, {{ auth.profile.name }}. <b id="logout-text" (click)="logout($event)" translate *ngIf="!auth.profile.impersonating_user">menu.logout</b><b id="logout-text" (click)="auth.logout()" translate *ngIf="auth.profile.impersonating_user">menu.stop_impersonating</b></a>
  <a class="icon" id="menuButton" (click)="menuButtonClicked = !menuButtonClicked">☰</a>
</div>

<div class="container">
  <div class="d-flex justify-content-center mt-4 pt-4 mb-3" *ngIf="loadingRoute || (guardLoaderIconService.loader$ | async)">
    <div class="spinner spinner-border"></div>
  </div>

  <alert type="danger" *ngIf="alerts.length > 0">
    <strong>{{ 'warning'|translate|ftitlecase }}!</strong> {{ 'alert.warning_body'|translate }}<br>
    <ng-container *ngIf="alerts.length == 1">
      {{ 'alert.current_alert'|translate }}: <a (click)="openAlert(alerts[0]['id'])"><b>{{ alerts[0]["created_at"] | date:'dd/MM/YYYY, HH:mm:ss' }}</b> ({{ 'press_for_more_info'|translate }})</a>
    </ng-container>
    <ng-container *ngIf="alerts.length > 1">
      {{ 'alert.current_alerts'|translate }}:
      <ul>
        <li *ngFor="let alert of alerts">
          <a (click)="openAlert(alert['id'])"><b>{{ alert["created_at"] | date:'dd/MM/YYYY, HH:mm:ss' }}</b> ({{ 'press_for_more_info'|translate }})</a>
        </li>
      </ul>
    </ng-container>
  </alert>

  <router-outlet></router-outlet>
</div>

<div id="footer" class="footer text-center p-3">
  {{ 'footer_text' | translate }}<br>
  <p>{{ 'revision' | translate | ftitlecase }} {{ versions.revision }} ({{ revision_datetime_string }})</p>
</div>