we_bstly-web/src/app/app.component.html

<mat-toolbar color="primary">
  <a href="javascript:" mat-icon-button>
    <mat-icon (click)="sidenav.toggle()">menu</mat-icon>
  </a>
  <mat-icon svgIcon="logo"></mat-icon>
  <span>
    we.bstly
  </span>
  <span class="spacer"></span>
  <ng-container>

    <button *ngIf="locales.length > 1" mat-button [matMenuTriggerFor]="menu">
      <mat-icon>language</mat-icon>
      <mat-icon>arrow_drop_down</mat-icon>
    </button>
    <mat-menu #menu="matMenu">
      <a *ngFor="let locale of locales" mat-menu-item
        (click)="setLocale(locale)">{{'locale.' + locale + '.long' | i18n}}</a>
    </mat-menu>
  </ng-container>
</mat-toolbar>

<mat-sidenav-container>
  <mat-sidenav #sidenav [mode]="isBiggerScreen() ? 'side' : 'over'" [(opened)]="opened"
    (click)="!isBiggerScreen() && opened=false">
    <mat-nav-list>
      <a *ngIf="!auth || auth && !auth.authenticated" routerLink="/login" routerLinkActive="active" mat-list-item>
        <mat-icon>login</mat-icon> {{'login' | i18n}}
      </a>
      <a *ngIf="auth && auth.authenticated" routerLink="/account/info" routerLinkActive="active" mat-list-item>
        <mat-icon>account_circle</mat-icon> {{'account' | i18n}}
      </a>
      <a *ngIf="auth && auth.authenticated" routerLink="/services" routerLinkActive="active" mat-list-item>
        <mat-icon>widgets</mat-icon> {{'services' | i18n}}
      </a>
      <a routerLink="/tokens" mat-list-item>
        <mat-icon>card_giftcard</mat-icon> {{'tokens.redeem' | i18n}}
      </a>
      <a href="https://token.bstly.de" target="_blank" mat-list-item>
        <mat-icon>shopping_cart</mat-icon> {{'tokens.get' | i18n}}<mat-icon style="font-size: 1em;">open_in_new
        </mat-icon>
      </a>
      <a *ngIf="auth && auth.authenticated" (click)="logout()" mat-list-item>
        <mat-icon>exit_to_app</mat-icon> {{'logout' | i18n}}
      </a>
    </mat-nav-list>

    <span class="spacer"></span>

    <mat-nav-list>
      <a routerLink="/imprint" mat-list-item style="font-size: 0.7em;">
        {{'imprint' | i18n}}
      </a>
      <a routerLink="/privacy-policy" mat-list-item style="font-size: 0.7em;">
        {{'privacy-policy' | i18n}}
      </a>
    </mat-nav-list>
  </mat-sidenav>

  <!-- Main content -->
  <mat-sidenav-content>
    <div class="container">
      <router-outlet></router-outlet>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>