added angular flex module, fixed sidenav still wip

package-lock.json

@@ -730,6 +730,14 @@
         "tslib": "^2.0.0"
       }
     },
+    "@angular/flex-layout": {
+      "version": "11.0.0-beta.33",
+      "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-11.0.0-beta.33.tgz",
+      "integrity": "sha512-unfhw3abZuKtdwQicRStHCYGbANPTHYg4WNRQk/RC5Mxq+4WOp4Q8HI7GqRHCGUYDCGUP7w1sU/oDt8f09nM8w==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "@angular/forms": {
       "version": "10.0.14",
       "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-10.0.14.tgz",

package.json

@@ -18,6 +18,7 @@
     "@angular/common": "~10.0.14",
     "@angular/compiler": "~10.0.14",
     "@angular/core": "~10.0.14",
+    "@angular/flex-layout": "^11.0.0-beta.33",
     "@angular/forms": "~10.0.14",
     "@angular/localize": "^10.2.3",
     "@angular/material": "^10.2.7",

src/app/app.component.ts

@@ -22,14 +22,10 @@ export class AppComponent {
 
 
   navItems: NavItem[] = [
-    {
-      displayName: 'Tabellenübersicht  ',
-      iconName: 'recent_actors',
-      route: 'tableOverview'
-    },
     {
       displayName: 'Tabellen',
       iconName: 'recent_actors',
+      route: 'tableOverview',
       children: [
         {
           displayName: 'Lastenräder',

src/app/app.module.ts

@@ -4,6 +4,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 
 import { DragDropModule } from '@angular/cdk/drag-drop';
+import { FlexLayoutModule } from '@angular/flex-layout';
 
 // Angular Material Components
 import { MatToolbarModule } from '@angular/material/toolbar';
@@ -58,6 +59,7 @@ import { TokenInterceptor } from './helper/token.interceptor'
     AppRoutingModule,
     BrowserAnimationsModule,
     FormsModule,
+    FlexLayoutModule,
     ReactiveFormsModule,
     MatToolbarModule,
     MatButtonModule,

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

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

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

@@ -26,3 +26,8 @@
     margin-right: 40px;
   }
 }
+
+span {
+  display: inline-flex;
+  vertical-align: middle;
+}

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

@@ -43,12 +43,19 @@ export class MenuListItemComponent implements OnInit {
   }
 
   onItemSelected(item: NavItem) {
-    if (!item.children || !item.children.length) {
+    /*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/styles.scss

@@ -17,3 +17,7 @@ h1:before {
     bottom: 0;
     border-bottom: 3px solid #7fc600;
 }
+
+.mat-list-item-content {
+    width: 100%;
+}