WiP (really fuckin alpha version sidenav)

src/app/app.component.html

@@ -1,6 +1,6 @@
 <div id="page-wrapper">
   <mat-toolbar id="navbar">
-    <button mat-icon-button (click)="sidenav.toggle()" *ngIf="loggedIn">
+    <button mat-icon-button (click)="navService.openNav()" *ngIf="loggedIn">
       <mat-icon>menu</mat-icon>
     </button>
     <span>fLotte</span>
@@ -28,19 +28,19 @@
   </mat-toolbar>
 
   <mat-sidenav-container id="content">
-    <!--<mat-sidenav #appDrawer mode="over" opened="false">
+    <mat-sidenav #appDrawer mode="over" opened="false">
       <mat-nav-list>
         <app-menu-list-item *ngFor="let item of navItems" [item]="item"></app-menu-list-item>
       </mat-nav-list>
-    </mat-sidenav>-->
-    <mat-sidenav #sidenav>
+    </mat-sidenav>
+    <!--<mat-sidenav #sidenav>
       <mat-nav-list (click)="sidenav.toggle()">
         <a mat-list-item [routerLink]="'/tableOverview'"> Tabellenübersicht </a>
         <a mat-list-item [routerLink]="'/table/bikes'"> Lastenräder </a>
         <a mat-list-item [routerLink]="'/table/participants'"> Beteiligte </a>
         <a mat-list-item [routerLink]="'/table/lendingStations'"> Ausleihstationen </a>
       </mat-nav-list>
-    </mat-sidenav>
+    </mat-sidenav>-->
     <mat-sidenav-content>
         <router-outlet></router-outlet>
     </mat-sidenav-content>

src/app/app.component.ts

@@ -5,6 +5,7 @@ import { Router } from '@angular/router';
 import { ViewChild } from '@angular/core';
 import { MatSidenav } from '@angular/material/sidenav';
 import { NavService } from './components/menu-list-item/nav.service';
+import { NavItem } from './components/menu-list-item/nav-item';
 
 @Component({
   selector: 'app-root',
@@ -19,6 +20,35 @@ export class AppComponent {
   @ViewChild('sidenav') public sideNav:MatSidenav;
   @ViewChild('appDrawer') appDrawer: ElementRef;
 
+
+  navItems: NavItem[] = [
+    {
+      displayName: 'Tabellenübersicht  ',
+      iconName: 'recent_actors',
+      route: 'tableOverview'
+    },
+    {
+      displayName: 'Tabellen',
+      iconName: 'recent_actors',
+      children: [
+        {
+          displayName: 'Lastenräder',
+          iconName: 'group',
+          route: 'table/bikes'
+        },
+        {
+          displayName: 'Beteiligte',
+          iconName: 'group',
+          route: 'table/participants'
+        },
+        {
+          displayName: 'Ausleihstationen',
+          iconName: 'group',
+          route: 'table/lendingStations'
+        }]
+      }];
+        
+
   constructor(
     private renderer: Renderer2,
     private themeService: ColorThemeService,

src/app/components/menu-list-item/menu-list-item.component.scss

@@ -1,4 +1,4 @@
-/*@import '../theme';
+@import '../../../theme';
 
 :host {
   display: flex;
@@ -7,12 +7,12 @@
   width: 100%;
 
   .mat-list-item.active {
-    background-color: mat-color($app-primary, 50);
+    //background-color: mat-color($dark-primary, 50);
   }
   &:hover,
   &:focus {
     >.mat-list-item:not(.expanded) {
-      background-color: mat-color($app-primary, 100) !important;
+      //background-color: mat-color($dark-primary, 100) !important;
     }
   }
 }
@@ -25,4 +25,4 @@
   .routeIcon {
     margin-right: 40px;
   }
-}*/
+}