Add fast switching toolbar

src/app/app.component.html

@@ -5,6 +5,8 @@
       <a mat-list-item (click)="menu.close()" routerLink="/slides">Slides</a>
       <a mat-list-item (click)="menu.close()" routerLink="/alerts">Alerts</a>
       <a mat-list-item (click)="menu.close()" routerLink="/search">Search</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>
 <div class="page-wrap">
@@ -44,6 +46,12 @@
         <mat-icon>videocam</mat-icon>
       </button>
     </mat-toolbar>
+    <mat-toolbar *ngIf="fastSwitching" class="fast-access">
+        <button mat-icon-button routerLink="/service"><mat-icon>list</mat-icon></button>
+        <button mat-icon-button routerLink="/slides"><mat-icon>collections</mat-icon></button>
+        <button mat-icon-button routerLink="/alerts"><mat-icon>error</mat-icon></button>
+        <button mat-icon-button routerLink="/search"><mat-icon>search</mat-icon></button>
+      </mat-toolbar>
   </footer>
 </div>
 </mat-sidenav-container>

src/app/app.component.scss

@@ -15,6 +15,15 @@ mat-sidenav {
     flex: 1;
 }
 
+mat-slide-toggle {
+    margin-left: 1rem;
+}
+
+.fast-access {
+    display: flex;
+    justify-content: space-around;
+}
+
 .footer {
     display: flex;
     flex-direction: row;

src/app/app.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { State } from './responses';
 import { OpenLPService } from './openlp.service';
+import { MatSlideToggleChange } from '@angular/material';
 
 @Component({
   selector: 'app-root',
@@ -8,8 +9,7 @@ import { OpenLPService } from './openlp.service';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  title = 'app';
+  fastSwitching: boolean = false;
-
   state: State = new State();
 
   constructor(private openlpService: OpenLPService) {
@@ -48,4 +48,8 @@ export class AppComponent {
   	this.openlpService.showDisplay().subscribe();
   }
 
+  sliderChanged(event: MatSlideToggleChange) {
+    this.fastSwitching = event.checked;
+  }
+
 }

src/app/app.module.ts

@@ -13,6 +13,7 @@ import {MatSelectModule} from '@angular/material/select';
 import {MatButtonModule} from '@angular/material/button';
 import {MatInputModule} from '@angular/material';
 import {MatTooltipModule} from '@angular/material/tooltip';
+import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 
 
 import { AppComponent } from './app.component';
@@ -48,7 +49,8 @@ import { FormsModule } from '@angular/forms';
     MatSelectModule,
     MatButtonModule,
     MatInputModule,
-    MatTooltipModule
+    MatTooltipModule,
+    MatSlideToggleModule
   ],
   providers: [
     OpenLPService