UI-Prototype/src/app/app.component.html

<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
<!-- * * * * * * * * * * and can be replaced.  * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * Delete the template below * * * * * * * * * -->
<!-- * * * * * * * to get started with your project! * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->

<style>
  
</style>
<mat-toolbar class="toolbar" color="primary">
  <button mat-icon-button aria-label="menu">
    <mat-icon>menu</mat-icon>
  </button>
  <button mat-icon-button [routerLink]="'/'">
    <mat-icon>home</mat-icon>
  </button>
  <h2><i>{{title}}</i></h2>
  <div class="right-toolbar-panel">
    <ng-container *ngTemplateOutlet="toolbarItems"/>
  </div>
</mat-toolbar>

<mat-toolbar class="mobile-toolbar">
  <ng-container *ngTemplateOutlet="toolbarItems"/>
</mat-toolbar>

<ng-template #toolbarItems>
  @for (item of [
      {icon:'home',link:'/',title:'Home',titleKey:'home'},
      {icon:'notifications',link:'/',title:'Notifications',titleKey:'notifications'},
      {icon:'account_circle',menu:userMenu,title:'User',titleKey:'user'}
    ]; track $index) {
      @switch (true) {
        @case (item.link !== undefined) {
          <div id="{{item.titleKey}}" class="toolbar-item" [routerLink]="item.link">
            <mat-icon>{{item.icon}}</mat-icon>
            <mat-label>{{(item.titleKey|tr:item.title)}}</mat-label>
          </div>
        }
        @case (item.menu !== undefined) {
          <div id="{{item.titleKey}}" class="toolbar-item" [matMenuTriggerFor]="item.menu">
            <mat-icon>{{item.icon}}</mat-icon>
            <mat-label>{{(item.titleKey|tr:item.title)}}</mat-label>
          </div>
        }
        @default {
          <div id="{{item.titleKey}}" class="toolbar-item">
            <mat-icon>{{item.icon}}</mat-icon>
            <mat-label>{{(item.titleKey|tr:item.title)}}</mat-label>
          </div>
        }
      }
    }
</ng-template>

<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * The content above * * * * * * * * * * * * -->
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * * -->
<!-- * * * * * * * * * * and can be replaced.  * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * End of Placeholder  * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<div class="container">
  <div class="main">
    <router-outlet></router-outlet>
  </div>
</div>

<!--menus-->
<mat-menu #userMenu="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="settings">{{'settings'|tr:'Settings'}}</button>
  <button mat-menu-item (click)="loginService.logout()" [disabled]="!loginService.user">
    <mat-icon>logout</mat-icon>
    {{'logout'|tr:'Logout'}}</button>
</mat-menu>

<mat-menu #settings="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="themes">{{'themes'|tr:'Themes'}}</button>
</mat-menu>

<mat-menu #themes="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="lightThemes">{{'light'|tr:'Light'}}</button>
  <button mat-menu-item [matMenuTriggerFor]="darkThemes">{{'dark'|tr:'Dark'}}</button>
</mat-menu>

<mat-menu #lightThemes="matMenu">
  <button mat-menu-item (click)="changeTheme('theme')">{{'main'|tr:'Main'}}</button>
</mat-menu>

<mat-menu #darkThemes="matMenu">
  <button mat-menu-item (click)="changeTheme('dark-theme')">{{'main'|tr:'Main'}}</button>
</mat-menu>