header.component.html

<mat-toolbar class="mat-elevation-z4">
  <mat-toolbar-row>
    <button mat-icon-button *ngIf="router.url !== '/home'" (click)="goBack()"
            matTooltip="{{'header.back' | translate}}">
      <mat-icon class="header-icons" aria-label="Go back">keyboard_arrow_left</mat-icon>
    </button>
    <span class="fill-remaining-space"></span>
    <h3 *ngIf="router.url.includes('comments') && user.role === 3 && deviceType === 'desktop'"
        fxLayoutAlign="center center">
      {{cTime}}
    </h3>
    <span class="fill-remaining-space"
          *ngIf="router.url.includes('comments') && user.role === 3 && deviceType === 'desktop'"></span>
    <span
      *ngIf="router.url.includes('comments') && moderationEnabled"
      class="moderation-enabled"
      fxLayoutAlign="center center">
    <mat-icon matTooltip="{{ 'header.moderation-enabled' | translate }}">
      gavel
    </mat-icon>
  </span>
    <h3 *ngIf="router.url.includes('comments')" fxLayoutAlign="center center">
      {{'header.id' | translate}}: {{ shortId.slice(0, 4) }} {{  shortId.slice(4, 8) }}
    </h3>
    <span class="fill-remaining-space"></span>

    <mat-menu #userMenu="matMenu" [overlapTrigger]="false">
      <button mat-menu-item *ngIf="user" routerLink="/user">
        <mat-icon class="sessions">work</mat-icon>
        <span>{{'header.my-sessions' | translate}}</span>
      </button>
      <button mat-menu-item *ngIf="user && !user.isGuest" (click)="openDeleteUserDialog()">
        <mat-icon color="warn">delete_sweep</mat-icon>
        <span>{{'header.delete-account' | translate}}</span>
      </button>
      <button mat-menu-item (click)="logout()">
        <mat-icon color="warn">exit_to_app</mat-icon>
        <span>{{ 'header.logout' | translate }}</span>
      </button>
    </mat-menu>

    <button mat-button *ngIf="user && deviceType === 'desktop'" [matMenuTriggerFor]="userMenu">
      <div class="label-icon">
        <mat-icon class="header-icons">account_box</mat-icon>
        <h3>{{'header.my-account' | translate}}</h3>
      </div>
    </button>

    <button mat-icon-button *ngIf="user && deviceType === 'mobile'" [matMenuTriggerFor]="userMenu">
      <mat-icon class="header-icons">account_box</mat-icon>
    </button>

    <button mat-button *ngIf="!user && deviceType === 'desktop'" (click)=login(false)>
      <div class="label-icon">
        <mat-icon class="header-icons">account_box</mat-icon>
        <h3 *ngIf="deviceType === 'desktop'">{{'header.login' | translate}}</h3>
      </div>
    </button>

    <button mat-icon-button *ngIf="!user && deviceType === 'mobile'" (click)=login(false)>
      <mat-icon class="header-icons">account_box</mat-icon>
    </button>

  </mat-toolbar-row>
</mat-toolbar>