From 01f399e547fbf59f02b65eb8e4931185127254f8 Mon Sep 17 00:00:00 2001
From: _Bastler <_Bastler@bstly.de>
Date: Sun, 21 Nov 2021 16:37:37 +0100
Subject: [PATCH] fix touch menu toggle

---
 src/app/ui/main/main.component.html |  3 ++-
 src/app/ui/main/main.component.ts   | 19 +++++++++----------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/app/ui/main/main.component.html b/src/app/ui/main/main.component.html
index 3e59fd5..1acc04c 100644
--- a/src/app/ui/main/main.component.html
+++ b/src/app/ui/main/main.component.html
@@ -34,7 +34,8 @@
 </mat-toolbar>
 
 <mat-sidenav-container>
-  <mat-sidenav #sidenav [mode]="isBiggerScreen() ? 'side' : 'over'">
+  <mat-sidenav #sidenav [mode]="isBiggerScreen() ? 'side' : 'over'" [(opened)]="opened"
+    (click)="!isBiggerScreen() && opened=false">
     <mat-nav-list>
       <a *ngIf="!auth || auth && !auth.authenticated" routerLink="/login" routerLinkActive="active" mat-list-item>
         <mat-icon>login</mat-icon> {{'login' | i18n}}
diff --git a/src/app/ui/main/main.component.ts b/src/app/ui/main/main.component.ts
index d62d150..2a595f2 100644
--- a/src/app/ui/main/main.component.ts
+++ b/src/app/ui/main/main.component.ts
@@ -17,8 +17,7 @@ import { MatSidenav } from '@angular/material/sidenav';
 })
 export class MainComponent {
 
-  @ViewChild(MatSidenav) sidenav: MatSidenav;
-
+  opened : boolean = true;
   darkTheme = "false";
   title = 'we.bstly';
   currentLocale: String;
@@ -53,9 +52,9 @@ export class MainComponent {
 
     const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
     if (width < 768) {
-      this.sidenav?.close();
+      this.opened = false;
     } else {
-      this.sidenav?.open();
+      this.opened = true;
     }
 
     if (localStorage.getItem("bstly.darkTheme") == "true") {
@@ -145,9 +144,9 @@ export class MainComponent {
   @HostListener('window:resize', [ '$event' ])
   onResize(event) {
     if (event.target.innerWidth < 768) {
-      this.sidenav?.close();
+      this.opened = false;
     } else {
-      this.sidenav?.open();
+      this.opened = true;
     }
   }
 
@@ -170,10 +169,10 @@ export class MainComponent {
         const touchDiff = this.touchStartX - this.touchX;
         this.touchStartX = 0;
         this.touchX = 0;
-        if (touchDiff < 0 && touchDiff < (this.touchThresh * -1) && !this.sidenav.opened) {
-          this.sidenav.open();
-        } else if (touchDiff > 0 && touchDiff > this.touchThresh && this.sidenav.opened) {
-          this.sidenav.close();
+        if (touchDiff < 0 && touchDiff < (this.touchThresh * -1) && !this.opened) {
+          this.opened = true;
+        } else if (touchDiff > 0 && touchDiff > this.touchThresh && this.opened) {
+          this.opened = false;
         }
       }
     })