<mat-toolbar *ngIf="this.show()">
  <button mat-icon-button (click)="snav.toggle()"><mat-icon>menu</mat-icon></button>
  <h2>{{ title }}</h2>
</mat-toolbar>

<mat-sidenav-container>
  <mat-sidenav #snav mode="over" style="padding: 0 20px 0 10px;">
    <mat-nav-list>
      <mat-icon aria-hidden="false" aria-label="Summary">timeline</mat-icon>
      <a routerLink="/summary" routerLinkActive="active" (click)="snav.toggle()" skipLocationChange>Summary</a>
      <hr class="splitter">
    </mat-nav-list>
    <mat-nav-list>
      <mat-icon aria-hidden="false" aria-label="List of jumps">list_alt</mat-icon>
      <a routerLink="/jumps" routerLinkActive="active" (click)="snav.toggle()" skipLocationChange>List of jumps</a>
    </mat-nav-list>
    <mat-nav-list>
      <mat-icon aria-hidden="false" aria-label="Add jumps">add_circle</mat-icon>
      <a routerLink="/newjump" routerLinkActive="active" (click)="snav.toggle()" skipLocationChange>Add a new jump</a>
      <hr class="splitter">
    </mat-nav-list>
    <mat-nav-list>
      <mat-icon aria-hidden="false" aria-label="Dropzones">store</mat-icon>
      <a routerLink="/dzs" routerLinkActive="active" (click)="snav.toggle()" skipLocationChange>List of DZs</a>
    </mat-nav-list>
    <mat-nav-list>
      <mat-icon aria-hidden="false" aria-label="Aircrafts">airplanemode_active</mat-icon>
      <a routerLink="/aircrafts" routerLinkActive="active" (click)="snav.toggle()" skipLocationChange>List of aircrafts</a>
    </mat-nav-list>
    <mat-nav-list>
      <mat-icon aria-hidden="false" aria-label="List of jump types">flight_land</mat-icon>
      <a routerLink="/jumpTypes" routerLinkActive="active" (click)="snav.toggle()" skipLocationChange>List of jump types</a>
    </mat-nav-list>
    <mat-nav-list>
      <mat-icon aria-hidden="false" aria-label="List of gears">settings_input_antenna</mat-icon>
      <a routerLink="/gears" routerLinkActive="active" (click)="snav.toggle()" skipLocationChange>List of gears</a>
    </mat-nav-list>
    <mat-nav-list *ngIf="currentUser">
      <hr class="splitter">
      <mat-icon aria-hidden="false" aria-label="User account">account_box</mat-icon>
      <a routerLink="/user" routerLinkActive="active" (click)="snav.toggle()" skipLocationChange>
        {{ this.currentUser.firstName }} {{ this.currentUser.lastName }}
      </a>
    </mat-nav-list>
    <mat-nav-list *ngIf="currentUser">
      <mat-icon aria-hidden="false" aria-label="To logout">logout</mat-icon>
      <span (click)="snav.toggle(); logout()" style="cursor: pointer;">Logout</span>
    </mat-nav-list>
  </mat-sidenav>

  <mat-sidenav-content>
    <router-outlet></router-outlet>
    <footer style="text-align: right;">Web software to log your skydive jumps - v{{ version }} - @Séb</footer>
  </mat-sidenav-content>
</mat-sidenav-container>