<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" fixedInViewport
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'over' : 'side'"
      [opened]="(isHandset$ | async) === false">
    <!--<mat-toolbar>Menu</mat-toolbar>-->
    <mat-nav-list>
      <a mat-list-item routerLink="home"><mat-icon>home</mat-icon>Home</a>
      <a mat-list-item routerLink="trail"><mat-icon>directions_walk</mat-icon>Trails</a>
      <a mat-list-item routerLink="plant"><mat-icon>local_florist</mat-icon>Plants</a>
      <a mat-list-item routerLink="map"><mat-icon>map</mat-icon>Map</a>
      <a mat-list-item routerLink="settings"><mat-icon>settings</mat-icon>Settings</a>
      <!--<a mat-list-item routerLink="admin" class='admin'><mat-icon>settings</mat-icon>Admin</a>-->
      <!--<a mat-list-item routerLink="about"><mat-icon>info</mat-icon>About</a>-->
      <!--
      <hr/>
      <a mat-list-item [routerLink]="trail.id" *ngFor="let trail of dataService.trails">{{ trail.properties.name }}</a>
      -->
      <div class="qrcode">
        Share this site:
        <img src="assets/img/site-url.png">
      </div>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content style="display: flex; flex-direction: column">
    <mat-toolbar>
      <button
        type="button"
        matTooltip="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()"
        *ngIf="isHandset$ | async">
        <mat-icon>menu</mat-icon>
      </button>
      <div class="appTitle">
        <div class="title">{{ (configService.conf | async).bootstrap?.app.title }}</div>
      </div>
      <app-message></app-message>
    </mat-toolbar>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>
