<section class="app" fxLayout="column" fxFill>
  <mat-toolbar *ngIf="headerEnabled" class="header mat-elevation-z7" color="primary">
    <button mat-icon-button
      *ngIf="isNarrowView"
      (click)="sidenav.open()">
      <mat-icon>menu</mat-icon>
    </button>
    <h2 routerLink="/">Helix</h2>
    <span fxFlex="1 1 auto"></span>
    <a mat-button>
      <mat-icon>person</mat-icon>
      {{ currentUser | async }}
    </a>
  </mat-toolbar>
  <mat-progress-bar *ngIf="isLoading" mode="indeterminate" [ngClass]="{'no-header': !headerEnabled}"></mat-progress-bar>
  <section class="main-container" [ngClass]="{'no-header': !headerEnabled}">
    <router-outlet></router-outlet>
  </section>
  <section *ngIf="footerEnabled" class="footer mat-elevation-z7" fxLayout="row" fxLayoutAlign="center center">
    <span>&copy; 2018 Helix. All rights reserved.</span>
  </section>
</section>
