SessionCompanion/SessionCompanion/ClientApp/angular.json

@@ -26,6 +26,7 @@
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "node_modules/bootstrap/dist/css/bootstrap.min.css",
+              "node_modules/rpg-awesome/css/rpg-awesome.min.css",
               "src/styles.css"
             ],
             "scripts": []
@@ -148,4 +149,4 @@
     }
   },
   "defaultProject": "SessionCompanion"
-}
+}

SessionCompanion/SessionCompanion/ClientApp/package-lock.json

@@ -1392,6 +1392,14 @@
         "tslib": "^1.9.0"
       }
     },
+    "@angular/flex-layout": {
+      "version": "8.0.0-beta.27",
+      "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-8.0.0-beta.27.tgz",
+      "integrity": "sha512-qmpvQPesU4ZQ56IscwgmVRpK2UnyV+gwvXUql7TMv0QV215hLcHczjGsrKkLfW2By5E7XEyDat9br72uVXcPMw==",
+      "requires": {
+        "tslib": "^1.7.1"
+      }
+    },
     "@angular/forms": {
       "version": "8.2.12",
       "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-8.2.12.tgz",
@@ -10513,6 +10521,11 @@
         "inherits": "^2.0.1"
       }
     },
+    "rpg-awesome": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/rpg-awesome/-/rpg-awesome-0.2.0.tgz",
+      "integrity": "sha512-+jTuYWHOs8iZV5+XKvI/7Ojr0k4pLX/dRpa2LHXReGMQI6h0cGvNxIh/AQY1zhAC7LPcNXnPTliD1/ugB/DbRA=="
+    },
     "run-async": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
@@ -12046,12 +12059,6 @@
         }
       }
     },
-    "tslint-config-prettier": {
-      "version": "1.18.0",
-      "resolved": "https://registry.npmjs.org/tslint-config-prettier/-/tslint-config-prettier-1.18.0.tgz",
-      "integrity": "sha512-xPw9PgNPLG3iKRxmK7DWr+Ea/SzrvfHtjFt5LBl61gk2UBG/DB9kCXRjv+xyIU1rUtnayLeMUVJBcMX8Z17nDg==",
-      "dev": true
-    },
     "tsutils": {
       "version": "2.29.0",
       "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.29.0.tgz",

SessionCompanion/SessionCompanion/ClientApp/package.json

@@ -34,6 +34,7 @@
     "jquery": "3.4.1",
     "oidc-client": "^1.9.1",
     "popper.js": "^1.16.0",
+    "rpg-awesome": "^0.2.0",
     "rxjs": "^6.5.3",
     "zone.js": "0.9.1"
   },

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

@@ -17,29 +17,17 @@
       </div>
       <mat-divider></mat-divider>
       <mat-nav-list>
-        <mat-list-item>
-          <mat-icon mat-list-icon>folder</mat-icon>
-          <span
+        <mat-list-item *ngFor="let item of leftSidenavItems">
+          <mat-icon mat-list-icon ><i class="{{item.iconName}}"></i></mat-icon>
+          <mat-list-item
             [@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
-          >
+            >
+            {{item.displayName}}
+            <mat-icon>
+              expand_more
+            </mat-icon>
+          </mat-list-item>
         </mat-list-item>
       </mat-nav-list>
     </mat-sidenav>

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

@@ -10,6 +10,7 @@ import { ErrorResponse } from '../../../types/ErrorResponse';
 import { HttpErrorResponse } from '@angular/common/http';
 import { LoggedCharactersViewModel } from '../../../types/viewmodels/character-viewmodels/LoggedCharactersViewModel';
 import { first } from 'rxjs/operators';
+import {LeftNavItem} from '../../../types/LeftNavItem';
 
 @Component({
   selector: 'app-game-master-dashboard',
@@ -21,6 +22,13 @@ export class GameMasterDashboardComponent implements OnInit, OnDestroy {
   allSubscriptions = new Subscription();
   leftSidenavExpanded = false;
   leftSidenavTextExpanded = false;
+  leftSidenavItems: LeftNavItem[] = [
+    {
+      displayName: 'Spells',
+      iconName: 'ra ra-aura',
+      expanded: false,
+    }
+  ];
 
   rightSidenavExpanded = false;
   rightSidenavTextExpanded = false;

SessionCompanion/SessionCompanion/ClientApp/src/types/LeftNavItem.ts

@@ -0,0 +1,7 @@
+export interface LeftNavItem {
+  displayName: string;
+  iconName: string;
+  componentToDisplay?: string;
+  expanded: boolean;
+  children?: LeftNavItem[];
+}

SessionCompanion/SessionCompanion/ClientApp/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
+    "skipLibCheck": true,
     "baseUrl": "./",
     "module": "esnext",
     "outDir": "./dist/out-tsc",