fix touch menu toggle

src/app/ui/main/main.component.html

@@ -34,8 +34,7 @@
 </mat-toolbar>
 
 <mat-sidenav-container>
-  <mat-sidenav #sidenav [mode]="isBiggerScreen() ? 'side' : 'over'" [(opened)]="opened"
+  <mat-sidenav #sidenav [mode]="isBiggerScreen() ? 'side' : 'over'">
-    (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}}

src/app/ui/main/main.component.ts

@@ -1,21 +1,24 @@
-import {Component, HostListener} from '@angular/core';
+import { Component, HostListener, ViewChild } from '@angular/core';
-import {Router} from '@angular/router';
+import { Router } from '@angular/router';
-import {DomSanitizer} from '@angular/platform-browser';
+import { DomSanitizer } from '@angular/platform-browser';
-import {MatIconRegistry} from '@angular/material/icon';
+import { MatIconRegistry } from '@angular/material/icon';
-import {DateAdapter} from '@angular/material/core';
+import { DateAdapter } from '@angular/material/core';
 import { fromEvent } from 'rxjs';
 
-import {AuthService} from '../../services/auth.service';
+import { AuthService } from '../../services/auth.service';
-import {I18nService} from '../../services/i18n.service';
+import { I18nService } from '../../services/i18n.service';
-import {ProfileService} from '../../services/profile.service';
+import { ProfileService } from '../../services/profile.service';
+import { MatSidenav } from '@angular/material/sidenav';
 
 @Component({
   selector: 'app-main',
   templateUrl: './main.component.html',
-  styleUrls: ['./main.component.scss']
+  styleUrls: [ './main.component.scss' ]
 })
 export class MainComponent {
-  opened = true;
+
+  @ViewChild(MatSidenav) sidenav: MatSidenav;
+
   darkTheme = "false";
   title = 'we.bstly';
   currentLocale: String;
@@ -49,13 +52,13 @@ export class MainComponent {
     this._adapter.setLocale(this.currentLocale);
 
     const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
-    if(width < 768) {
+    if (width < 768) {
-      this.opened = false;
+      this.sidenav?.close();
     } else {
-      this.opened = true;
+      this.sidenav?.open();
     }
 
-    if(localStorage.getItem("bstly.darkTheme") == "true") {
+    if (localStorage.getItem("bstly.darkTheme") == "true") {
       this.darkTheme = "true";
       window.document.body.classList.add("dark-theme");
     }
@@ -66,10 +69,10 @@ export class MainComponent {
   setLocale(locale) {
     localStorage.setItem("bstly.locale", locale);
 
-    if(this.auth && this.auth.authenticated) {
+    if (this.auth && this.auth.authenticated) {
       this.profileService.getField("locale").subscribe((profileField: any) => {
 
-        if(profileField == null) {
+        if (profileField == null) {
           profileField = {
             "name": "locale",
             "type": "TEXT",
@@ -88,7 +91,7 @@ export class MainComponent {
   }
 
   darkThemeChange($event) {
-    if($event.checked) {
+    if ($event.checked) {
       this.darkTheme = "true";
     } else {
       this.darkTheme = "false";
@@ -96,10 +99,10 @@ export class MainComponent {
 
     localStorage.setItem("bstly.darkTheme", this.darkTheme);
 
-    if(this.auth && this.auth.authenticated) {
+    if (this.auth && this.auth.authenticated) {
       this.profileService.getField("darkTheme").subscribe((profileField: any) => {
 
-        if(profileField == null) {
+        if (profileField == null) {
           profileField = {
             "name": "darkTheme",
             "type": "BOOL",
@@ -120,7 +123,7 @@ export class MainComponent {
 
   logout() {
     this.authService.logout().subscribe(data => {
-      this.router.navigate([""]).then(() => {
+      this.router.navigate([ "" ]).then(() => {
         window.location.reload();
       });
     })
@@ -128,7 +131,7 @@ export class MainComponent {
 
   isBiggerScreen() {
     const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
-    if(width < 768) {
+    if (width < 768) {
       return false;
     } else {
       return true;
@@ -139,12 +142,12 @@ export class MainComponent {
     window.open(url, target);
   }
 
-  @HostListener('window:resize', ['$event'])
+  @HostListener('window:resize', [ '$event' ])
   onResize(event) {
-    if(event.target.innerWidth < 768) {
+    if (event.target.innerWidth < 768) {
-      this.opened = false;
+      this.sidenav?.close();
     } else {
-      this.opened = true;
+      this.sidenav?.open();
     }
   }
 
@@ -163,12 +166,15 @@ export class MainComponent {
     })
 
     fromEvent(document, 'touchend').subscribe((event: TouchEvent) => {
+      if (this.touchX != 0) {
         const touchDiff = this.touchStartX - this.touchX;
-
+        this.touchStartX = 0;
-      if (touchDiff < 0 && touchDiff < (this.touchThresh * -1) && !this.opened) {
+        this.touchX = 0;
-        this.opened = true;
+        if (touchDiff < 0 && touchDiff < (this.touchThresh * -1) && !this.sidenav.opened) {
-      } else if (touchDiff > 0 && touchDiff > this.touchThresh && this.opened) {
+          this.sidenav.open();
-        this.opened = false;
+        } else if (touchDiff > 0 && touchDiff > this.touchThresh && this.sidenav.opened) {
+          this.sidenav.close();
+        }
       }
     })
   }