From 658b79402b31e62c7a494e6b91072907f87dcade Mon Sep 17 00:00:00 2001
From: FlayInAHook <timmae2001@gmail.com>
Date: Wed, 18 Nov 2020 13:09:04 +0100
Subject: [PATCH] added angular flex module, fixed sidenav still wip

---
 package-lock.json                             |  8 +++++++
 package.json                                  |  1 +
 src/app/app.component.ts                      |  6 +----
 src/app/app.module.ts                         |  2 ++
 .../menu-list-item.component.html             | 23 +++++++++----------
 .../menu-list-item.component.scss             |  5 ++++
 .../menu-list-item.component.ts               | 11 +++++++--
 src/styles.scss                               |  4 ++++
 8 files changed, 41 insertions(+), 19 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 02f6f4c..c776c76 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 2369f52..4e9ebb9 100644
--- a/package.json
+++ b/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",
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index f0b7d33..0b102cb 100644
--- a/src/app/app.component.ts
+++ b/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',
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index ff0d3db..b4d73f2 100644
--- a/src/app/app.module.ts
+++ b/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,
diff --git a/src/app/components/menu-list-item/menu-list-item.component.html b/src/app/components/menu-list-item/menu-list-item.component.html
index 62a708b..34abf60 100644
--- a/src/app/components/menu-list-item/menu-list-item.component.html
+++ b/src/app/components/menu-list-item/menu-list-item.component.html
@@ -1,16 +1,15 @@
-<a mat-list-item [ngStyle]="{'padding-left': (depth * 12) + 'px'}" (click)="onItemSelected(item)"
-   [ngClass]="{'active': item.route ? router.isActive(item.route, true): false, 'expanded': expanded}"
-   class="menu-list-item">
-  <mat-icon class="routeIcon">{{item.iconName}}</mat-icon>
-  {{item.displayName}}
-  <span fxFlex *ngIf="item.children && item.children.length">
-    <span fxFlex></span>
-    <mat-icon [@indicatorRotate]="expanded ? 'expanded': 'collapsed'">
-      expand_more
-    </mat-icon>
+<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>
+  <app-menu-list-item *ngFor="let child of item.children" [item]="child" [depth]="depth+1"> </app-menu-list-item>
 </div>
diff --git a/src/app/components/menu-list-item/menu-list-item.component.scss b/src/app/components/menu-list-item/menu-list-item.component.scss
index 149e979..2629bc7 100644
--- a/src/app/components/menu-list-item/menu-list-item.component.scss
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/app/components/menu-list-item/menu-list-item.component.ts b/src/app/components/menu-list-item/menu-list-item.component.ts
index b0d3476..98b4704 100644
--- a/src/app/components/menu-list-item/menu-list-item.component.ts
+++ b/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;
   }
 }
diff --git a/src/styles.scss b/src/styles.scss
index 42b42d7..4396c37 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -16,4 +16,8 @@ h1:before {
     height: 1px;
     bottom: 0;
     border-bottom: 3px solid #7fc600;
+}
+
+.mat-list-item-content {
+    width: 100%;
 }
\ No newline at end of file