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

<mat-toolbar color="primary">
  <mat-toolbar-row>
    <button mat-icon-button (click)="menu.toggle()"><mat-icon>menu</mat-icon></button>
    <span class="page-title">{{pageTitle}}</span>
    <span class="spacer"></span>
    <span class="app-version">v{{appVersion}}</span>
  </mat-toolbar-row>
</mat-toolbar>
<mat-sidenav-container>
  <mat-sidenav #menu mode="over">
    <mat-nav-list>
      <a mat-list-item (click)="menu.close()" routerLink="/service"><mat-icon>list</mat-icon>  Service</a>
      <a mat-list-item (click)="menu.close()" routerLink="/slides"><mat-icon>collections</mat-icon>  Slides</a>
      <a mat-list-item (click)="menu.close()" routerLink="/alerts"><mat-icon>error</mat-icon>  Alerts</a>
      <a mat-list-item (click)="menu.close()" routerLink="/search"><mat-icon>search</mat-icon>  Search</a>
      <a mat-list-item (click)="menu.close()" routerLink="/themes"><mat-icon>image_search</mat-icon>  Themes</a>
      <mat-divider></mat-divider>
      <a mat-list-item (click)="menu.close()" routerLink="/main">Main View</a>
      <a mat-list-item (click)="menu.close()" routerLink="/stage">Stage View</a>
      <a mat-list-item (click)="menu.close()" routerLink="/chords">Chord View</a>
      <mat-divider></mat-divider>
      <mat-slide-toggle color="primary" [checked]="fastSwitching" (change)="sliderChanged($event)">Fast switching</mat-slide-toggle>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <main class="content">
      <router-outlet></router-outlet>
    </main>
    <!-- These two toolbars are for padding the content so the real toolbars do not block content when scrolled down -->
    <mat-toolbar class="toolbar-padding"></mat-toolbar>
    <mat-toolbar *ngIf="fastSwitching" class="toolbar-padding"></mat-toolbar>
    <footer>
      <mat-toolbar class="footer">
        <button mat-icon-button (click)="previousItem()" matTooltip="Previous item">
          <mat-icon>first_page</mat-icon>
        </button>
        <button mat-icon-button (click)="nextItem()" matTooltip="Next item">
          <mat-icon>last_page</mat-icon>
        </button>
        <button mat-icon-button (click)="previousSlide()" matTooltip="Previous slide">
          <mat-icon>navigate_before</mat-icon>
        </button>
        <button mat-icon-button (click)="nextSlide()" matTooltip="Next slide">
          <mat-icon>navigate_next</mat-icon>
        </button>
        <button mat-icon-button (click)="blankDisplay()" class="displayButton" [class.active]="state.blank" [disabled]="state.blank" matTooltip="Show black">
          <mat-icon>videocam_off</mat-icon>
        </button>
        <button mat-icon-button (click)="themeDisplay()" class="displayButton" [class.active]="state.theme" [disabled]="state.theme" matTooltip="Show background">
          <mat-icon>wallpaper</mat-icon>
        </button>
        <button mat-icon-button (click)="desktopDisplay()" class="displayButton" [class.active]="state.display" [disabled]="state.display" matTooltip="Show Desktop">
          <mat-icon>desktop_windows</mat-icon>
        </button>
        <button mat-icon-button (click)="showDisplay()" class="displayButton" [class.active]="state.display" [disabled]="state.live()" matTooltip="Show Presentation">
          <mat-icon>videocam</mat-icon>
        </button>
      </mat-toolbar>
      <nav mat-tab-nav-bar mat-stretch-tabs class="fast-switcher" *ngIf="fastSwitching">
        <a mat-tab-link
          routerLink="/service"
          routerLinkActive #serviceRoute="routerLinkActive"
          [active]="serviceRoute.isActive"><mat-icon>list</mat-icon></a>
        <a mat-tab-link
          routerLink="/slides"
          routerLinkActive #slidesRoute="routerLinkActive"
          [active]="slidesRoute.isActive"><mat-icon>collections</mat-icon></a>
        <a mat-tab-link
          routerLink="/alerts"
          routerLinkActive #alertsRoute="routerLinkActive"
          [active]="alertsRoute.isActive"><mat-icon>error</mat-icon></a>
        <a mat-tab-link
          routerLink="/search"
          routerLinkActive #searchRoute="routerLinkActive"
          [active]="searchRoute.isActive"><mat-icon>search</mat-icon></a>
        <a mat-tab-link
          routerLink="/themes"
          routerLinkActive #themesRoute="routerLinkActive"
          [active]="themesRoute.isActive"><mat-icon>image_search</mat-icon></a>
      </nav>
    </footer>
  </mat-sidenav-content>
</mat-sidenav-container>