Bernd-L/exDateMan

<div class="wrap">
  <!-- Navigation toolbar -->
  <mat-toolbar color="primary" class="toolbar">
    <!-- Sidenav toggle button -->
    <button mat-icon-button (click)="sidenav.toggle()" color="basic">
      <!-- Burger icon -->
      <mat-icon>menu</mat-icon>
    </button>
    <!-- Navigation bar heading -->
    {{ title }}

    <!-- Middle -->
    <span class="example-fill-remaining-space"></span>

    <!-- On the right side-->
    <div class="user-right">
      <ng-container *ngIf="!loading">
        <ng-container *ngIf="authStatus.authorized">
          <button mat-stroked-button [matMenuTriggerFor]="appMenu">
            <mat-icon>account_circle</mat-icon>
            {{ authStatus.user.name }} ({{ authStatus.user.email }})
          </button>

          <mat-menu #appMenu="matMenu">
            <button
              mat-menu-item
              routerLink="/account"
              *ngIf="!authStatus.offline"
            >
              Account
            </button>
            <button
              mat-menu-item
              (click)="onLogout()"
              *ngIf="!authStatus.offline"
            >
              Logout
            </button>
            <button
              mat-menu-item
              (click)="onLogout()"
              *ngIf="authStatus.offline"
              disabled
            >
              You're offline
            </button>
          </mat-menu>
        </ng-container>

        <ng-container *ngIf="!authStatus.authorized">
          <button
            mat-stroked-button
            *ngIf="!invalidJWT"
            color="basic"
            routerLink="/register"
          >
            Register
          </button>
          &nbsp;
          <button
            mat-raised-button
            *ngIf="!invalidJWT"
            color="accent"
            routerLink="/login"
          >
            Login
          </button>
          <p *ngIf="invalidJWT">
            Your login has expired. Use the buttons below to log in or register.
          </p>
        </ng-container>
      </ng-container>

      <ng-container *ngIf="loading">Please wait...</ng-container>
    </div>
  </mat-toolbar>

  <mat-sidenav-container class="sidenav-container" autosize>
    <!-- The main content (not the sidenav) -->
    <mat-sidenav-content>
      <!-- Add a bit of space around the edges -->
      <div class="defaultMargin">
        <app-crumb-trail></app-crumb-trail>
        <mat-divider></mat-divider>
        <br />
        <!-- Main app content -->
        <router-outlet></router-outlet>
      </div>
    </mat-sidenav-content>

    <!-- The sidenav content -->
    <mat-sidenav
      #sidenav
      mode="side"
      [(opened)]="sideNavOpened"
      class="sidenav-main"
    >
      <!-- The SideNav component -->
      <app-side-nav></app-side-nav>
    </mat-sidenav>
  </mat-sidenav-container>
</div>