Improve Sidenav

src/app/app.component.html

@@ -31,16 +31,23 @@
     <mat-sidenav #appDrawer mode="over" opened="false">
       <mat-nav-list class="nav-profile-list">
         <mat-list-item class="nav-profile-list-item">
-            <sidenav-profile>
+          <sidenav-profile> </sidenav-profile>
-          </sidenav-profile>
         </mat-list-item>
       </mat-nav-list>
       <mat-nav-list>
-        <app-menu-list-item *ngFor="let item of navItems" [item]="item"></app-menu-list-item>
+        <a
+          [routerLink]="link.route"
+          *ngFor="let link of tableLinks"
+        >
+          <mat-list-item [ngClass]="{'primary-color': link.route === router.url.split('?')[0] }">
+            <mat-icon class="nav-list-icon">{{ link.iconName }}</mat-icon>
+            {{ link.displayName }}
+          </mat-list-item>
+        </a>
       </mat-nav-list>
     </mat-sidenav>
     <mat-sidenav-content>
-        <router-outlet></router-outlet>
+      <router-outlet></router-outlet>
     </mat-sidenav-content>
   </mat-sidenav-container>
 </div>

src/app/app.component.scss

@@ -1,4 +1,5 @@
 @import '../theme';
+$primary-color: mat-color($light-primary, 300);
 
 #page-wrapper {
   display: flex;
@@ -20,8 +21,15 @@
   padding-top:0px
 }
 
+.primary-color {
+  color: $primary-color !important;
+}
+
 mat-nav-list .nav-profile-list-item {
   height:200px;
-  background: mat-color($light-primary, 300);;
+  background: $primary-color;
-  //color:white;
+}
+
+.nav-list-icon {
+  margin-right: 1em;
 }

src/app/app.component.ts

@@ -5,7 +5,6 @@ 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';
 import { tableLinks } from 'src/app/tableLinks';
 
 @Component({
@@ -21,13 +20,7 @@ export class AppComponent {
   @ViewChild('sidenav') public sideNav:MatSidenav;
   @ViewChild('appDrawer') appDrawer: ElementRef;
 
-  navItems: NavItem[] = [
+  tableLinks = tableLinks
-    {
-      displayName: 'Tabellen',
-      iconName: 'recent_actors',
-      route: 'tableOverview',
-      children: tableLinks
-      }];
         
 
   constructor(

src/app/app.module.ts

@@ -44,7 +44,6 @@ import { ParticipantsComponent } from './pages/tables/participants/participants.
 import { LendingStationsComponent } from './pages/tables/lending-stations/lending-stations.component';
 import { TableOverviewComponent } from './pages/table-overview/table-overview.component';
 import { CellComponent } from './components/tableComponents/cell/cell.component';
-import { MenuListItemComponent } from './components/menu-list-item/menu-list-item.component';
 import { SidenavProfileComponent } from './components/sidenav-profile/sidenav-profile.component';
 import { NavService } from './components/menu-list-item/nav.service';
 import { TokenInterceptor } from './helper/token.interceptor';
@@ -91,7 +90,6 @@ import { FilterRowComponent } from './components/tableComponents/filter-row/filt
 @NgModule({
   declarations: [
     AppComponent,
-    MenuListItemComponent,
     SidenavProfileComponent,
     LoginComponent,
     BikesComponent,

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

@@ -1,15 +0,0 @@
-<a mat-list-item [ngStyle]="{'padding-left': (depth * 12) + 'px'}" [ngClass]="{'active': item.route ? router.isActive(item.route, true): false, 'expanded': expanded}" class="menu-list-item">
-  <span (click)="onItemSelected(item)">
-      <mat-icon class="routeIcon">{{item.iconName}}</mat-icon>
-      {{item.displayName}}
-  </span>
-  <span fxFlex *ngIf="item.children && item.children.length" (click)="expand(item)">
-      <span fxFlex></span>
-      <mat-icon [@indicatorRotate]="expanded ? 'expanded': 'collapsed'">
-          expand_more
-      </mat-icon>
-  </span>
-</a>
-<div *ngIf="expanded">
-  <app-menu-list-item *ngFor="let child of item.children" [item]="child" [depth]="depth+1"> </app-menu-list-item>
-</div>

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

@@ -1,33 +0,0 @@
-@import '../../../theme';
-
-:host {
-  display: flex;
-  flex-direction: column;
-  outline: none;
-  width: 100%;
-
-  .mat-list-item.active {
-    //background-color: mat-color($dark-primary, 50);
-  }
-  &:hover,
-  &:focus {
-    >.mat-list-item:not(.expanded) {
-      //background-color: mat-color($dark-primary, 100) !important;
-    }
-  }
-}
-
-.mat-list-item {
-  padding: 8px 0;
-  display: flex;
-  width: auto;
-
-  .routeIcon {
-    margin-right: 40px;
-  }
-}
-
-span {
-  display: inline-flex;
-  vertical-align: middle;
-}

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

@@ -1,62 +0,0 @@
-import {Component, HostBinding, Input, OnInit} from '@angular/core';
-import {NavItem} from './nav-item';
-import {Router} from '@angular/router';
-import {NavService} from './nav.service';
-import {animate, state, style, transition, trigger} from '@angular/animations';
-
-@Component({
-  selector: 'app-menu-list-item',
-  templateUrl: './menu-list-item.component.html',
-  styleUrls: ['./menu-list-item.component.scss'],
-  animations: [
-    trigger('indicatorRotate', [
-      state('collapsed', style({transform: 'rotate(0deg)'})),
-      state('expanded', style({transform: 'rotate(180deg)'})),
-      transition('expanded <=> collapsed',
-        animate('225ms cubic-bezier(0.4,0.0,0.2,1)')
-      ),
-    ])
-  ]
-})
-export class MenuListItemComponent implements OnInit {
-  expanded: boolean = false;
-  @HostBinding('attr.aria-expanded') ariaExpanded = this.expanded;
-  @Input() item: NavItem;
-  @Input() depth: number;
-
-  constructor(public navService: NavService,
-              public router: Router,
-              ) {
-    if (this.depth === undefined) {
-      this.depth = 0;
-    }
-  }
-
-  ngOnInit() {
-    this.navService.currentUrl.subscribe((url: string) => {
-      if (this.item.route && url) {
-        // console.log(`Checking '/${this.item.route}' against '${url}'`);
-        this.expanded = url.indexOf(`/${this.item.route}`) === 0;
-        this.ariaExpanded = this.expanded;
-        // console.log(`${this.item.route} is expanded: ${this.expanded}`);
-      }
-    });
-  }
-
-  onItemSelected(item: NavItem) {
-    /*if (!item.children || !item.children.length) {
-      this.router.navigate([item.route]);
-      this.navService.closeNav();
-    }
-    if (item.children && item.children.length) {
-      this.expanded = !this.expanded;
-    }*/
-    
-    this.router.navigate([item.route]);
-    this.navService.closeNav();
-  }
-
-  expand(item: NavItem) {
-    this.expanded = !this.expanded;
-  }
-}

src/app/components/menu-list-item/nav-item.ts

@@ -1,8 +0,0 @@
-export interface NavItem {
-    displayName: string;
-    disabled?: boolean;
-    iconName: string;
-    route?: string;
-    children?: NavItem[];
-  }
-