SessionCompanion/SessionCompanion/ClientApp/src/app.routing.ts

@@ -2,6 +2,7 @@ import { RouterModule, Routes } from '@angular/router';
 import { SelectRoleComponent } from './app/components/select-role/select-role.component';
 import { SignInComponent } from './app/components/sign-in/sign-in.component';
 import { RegistrationComponent } from './app/components/registration/registration.component';
+import {GameMasterDashboardComponent} from './app/components/game-master-dashboard/game-master-dashboard.component';
 
 const routes: Routes = [
   {
@@ -19,6 +20,11 @@ const routes: Routes = [
     component: RegistrationComponent,
     pathMatch: 'full'
   },
+  {
+    path: 'gamemaster',
+    component: GameMasterDashboardComponent,
+    pathMatch: 'full'
+  }
 ];
 
 export  const appRoutingModule = RouterModule.forRoot(routes);

SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts

@@ -8,6 +8,7 @@ import { appRoutingModule } from '../app.routing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { SignInComponent } from './components/sign-in/sign-in.component';
 import { RegistrationComponent } from './components/registration/registration.component';
+import { GameMasterDashboardComponent} from './components/game-master-dashboard/game-master-dashboard.component';
 import {
   MatCardModule,
   MatTabsModule,
@@ -15,7 +16,7 @@ import {
   MatInputModule,
   MatButtonModule,
   MatCheckboxModule,
-  MatIconModule
+  MatIconModule, MatSidenavModule, MatToolbarModule, MatListModule
 } from '@angular/material';
 
 @NgModule({
@@ -24,6 +25,7 @@ import {
     SelectRoleComponent,
     SignInComponent,
     RegistrationComponent,
+    GameMasterDashboardComponent,
   ],
   imports: [
 BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
@@ -38,6 +40,9 @@ BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
     MatButtonModule,
     MatCheckboxModule,
     MatIconModule,
+    MatSidenavModule,
+    MatToolbarModule,
+    MatListModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-dashboard/game-master-dashboard.component.css

@@ -0,0 +1,42 @@
+@import "../../../styles.css";
+
+.root-container {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.leftnav{
+  background-color: #3D4751;
+  border-right:none;
+}
+
+.rightnav{
+  background-color: #606F80;
+  border-left: none;
+}
+
+mat-sidenav-content{
+  background-color: #4F5C69;
+}
+
+mat-icon{
+  color: #DF7C0F;
+}
+
+mat-sidenav-content>.gm-toolbar{
+  background-color: #3D4751;
+  color: whitesmoke;
+}
+
+.main-block{
+  height: 100%;
+}
+.sidenav-container {
+  flex: 1;
+}
+

SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-dashboard/game-master-dashboard.component.html

@@ -0,0 +1,56 @@
+<div class="root-container" >
+<mat-sidenav-container class="sidenav-container">
+  <mat-sidenav class="leftnav" opened mode="side" [@onSideNavChange]="leftSidenavExpanded ? 'open' : 'close'">
+    <div style="background-color: #292F36">
+    <button mat-icon-button (click)="UpdateSidenavStatus('left', !leftSidenavTextExpanded)" style="margin: 12px; ">
+      <mat-icon aria-label="Menu">menu</mat-icon>
+    </button>
+    </div>
+    <mat-divider></mat-divider>
+    <mat-nav-list>
+      <mat-list-item>
+        <mat-icon mat-list-icon>folder</mat-icon>
+        <span [@animateText]="leftSidenavTextExpanded ? 'show' : 'hide'" style="color: white">Link 1</span>
+      </mat-list-item>
+      <mat-list-item>
+        <mat-icon mat-list-icon>folder</mat-icon>
+        <span [@animateText]="leftSidenavTextExpanded ? 'show' : 'hide'" style="color: white">Link 2</span>
+      </mat-list-item>
+      <mat-list-item>
+        <mat-icon mat-list-icon>folder</mat-icon>
+        <span [@animateText]="leftSidenavTextExpanded ? 'show' : 'hide'" style="color: white">Link 3</span>
+      </mat-list-item>
+    </mat-nav-list>
+  </mat-sidenav>
+  <mat-sidenav-content >
+    <mat-toolbar color="primary" class="gm-toolbar">
+      <span>SessionCompanion</span>
+    </mat-toolbar>
+  </mat-sidenav-content>
+  <mat-sidenav class="rightnav" opened mode="side" position="end" [@onSideNavChange]="rightSidenavExpanded ? 'open' : 'close'">
+    <div style="background-color: #4F5B69">
+    <button mat-icon-button (click)="UpdateSidenavStatus('right', !rightSidenavExpanded)" style="margin: 12px; ">
+      <mat-icon aria-label="Menu">chat</mat-icon>
+    </button>
+      <button mat-icon-button *ngIf="rightSidenavTextExpanded" (click)="UpdateSidenavStatus('right', !rightSidenavExpanded)" style="margin: 12px; position: absolute; right: 10px;">
+        <mat-icon aria-label="Menu">close</mat-icon>
+      </button>
+    </div>
+    <mat-divider></mat-divider>
+    <mat-nav-list>
+      <mat-list-item>
+        <mat-icon mat-list-icon>folder</mat-icon>
+        <a  [@animateText]="rightSidenavTextExpanded ? 'show' : 'hide'" mat-list-item href="#" style="color: white">Link 1</a>
+      </mat-list-item>
+      <mat-list-item>
+        <mat-icon mat-list-icon>folder</mat-icon>
+        <a [@animateText]="rightSidenavTextExpanded  ? 'show' : 'hide'" mat-list-item href="#" style="color: white">Link 2</a>
+      </mat-list-item>
+      <mat-list-item>
+        <mat-icon mat-list-icon>folder</mat-icon>
+        <a [@animateText]="rightSidenavTextExpanded  ? 'show' : 'hide'" mat-list-item href="#" style="color: white">Link 3</a>
+      </mat-list-item>
+    </mat-nav-list>
+  </mat-sidenav>
+</mat-sidenav-container>
+</div>

SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-dashboard/game-master-dashboard.component.ts

@@ -1,18 +1,34 @@
 import { Component } from '@angular/core';
+import {animateText, onSideNavChange} from '../../shared/animations/sidenav-animations';
 
 @Component({
   selector: 'app-game-master-dashboard',
   templateUrl: './game-master-dashboard.component.html',
-  styleUrls: ['./game-master-dashboard.component.css']
+  styleUrls: ['./game-master-dashboard.component.css'],
+  animations: [onSideNavChange, animateText]
 })
 export class GameMasterDashboardComponent {
-  isExpanded = false;
+  leftSidenavExpanded = false;
+  leftSidenavTextExpanded = false;
 
-  collapse() {
+  rightSidenavExpanded = false;
-    this.isExpanded = false;
+  rightSidenavTextExpanded = false;
+  constructor() {}
+
+  UpdateSidenavStatus(sidenav: string, newValue: boolean){
+    switch (sidenav) {
+      case 'left':
+        this.leftSidenavExpanded = newValue;
+        setTimeout(() => {
+          this.leftSidenavTextExpanded = newValue;
+        }, 200);
+        break;
+      case 'right':
+        this.rightSidenavExpanded = newValue;
+        setTimeout(() => {
+          this.rightSidenavTextExpanded = newValue;
+        }, 200);
+        break;
     }
-
-  toggle() {
-    this.isExpanded = !this.isExpanded;
   }
 }

SessionCompanion/SessionCompanion/ClientApp/src/app/shared/animations/sidenav-animations.ts

@@ -0,0 +1,33 @@
+import { trigger, state, style, transition, animate, animateChild, query } from '@angular/animations';
+
+export const onSideNavChange = trigger('onSideNavChange', [
+  state('close',
+    style({
+      'min-width': '50px'
+    })
+  ),
+  state('open',
+    style({
+      'min-width': '200px'
+    })
+  ),
+  transition('close => open', animate('250ms ease-in')),
+  transition('open => close', animate('250ms ease-in')),
+]);
+
+export const animateText = trigger('animateText', [
+  state('hide',
+    style({
+      'display': 'none',
+      opacity: 0,
+    })
+  ),
+  state('show',
+    style({
+      'display': 'block',
+      opacity: 1,
+    })
+  ),
+  transition('close => open', animate('350ms ease-in')),
+  transition('open => close', animate('200ms ease-out')),
+]);