On touchscreens add content overlay for opened menu (#3088)

* Overflow:hidden on touchscreen when modal-open

* Do not display menu by default on touchscreens

* Add content overlay on touchscreens when menu is opened

* Fix zIndex overlay for search infos

* On touchscreens close menu on swipe left

Co-authored-by: kimsible <kimsible@users.noreply.github.com>

1 files changed, 30 insertions, 7 deletions

diff --git a/client/src/app/core/menu/menu.service.ts b/client/src/app/core/menu/menu.service.ts
index ef5271f97..671ee3e4f 100644
--- a/client/src/app/core/menu/menu.service.ts
+++ b/client/src/app/core/menu/menu.service.ts
@@ -12,22 +12,45 @@ export class MenuService {
   constructor (
     private screenService: ScreenService
   ) {
-    // Do not display menu on small screens
-    if (this.screenService.isInSmallView()) {
-      this.isMenuDisplayed = false
+    // Do not display menu on small or touch screens
+    if (this.screenService.isInSmallView() || this.screenService.isInTouchScreen()) {
+      this.setMenuDisplay(false)
     }
 
-    fromEvent(window, 'resize')
-      .pipe(debounceTime(200))
-      .subscribe(() => this.onResize())
+    this.handleWindowResize()
   }
 
   toggleMenu () {
-    this.isMenuDisplayed = !this.isMenuDisplayed
+    this.setMenuDisplay(!this.isMenuDisplayed)
     this.isMenuChangedByUser = true
   }
 
+  setMenuDisplay (display: boolean) {
+    this.isMenuDisplayed = display
+
+    // On touch screens, lock body scroll and display content overlay when memu is opened
+    if (this.screenService.isInTouchScreen()) {
+      if (this.isMenuDisplayed) {
+        document.body.classList.add('menu-open')
+        this.screenService.onFingerSwipe('left', () => { this.setMenuDisplay(false) })
+      } else {
+        document.body.classList.remove('menu-open')
+      }
+    }
+  }
+
   onResize () {
     this.isMenuDisplayed = window.innerWidth >= 800 && !this.isMenuChangedByUser
   }
+
+  private handleWindowResize () {
+    // On touch screens, do not handle window resize event since opened menu is handled with a content overlay
+    if (this.screenService.isInTouchScreen()) {
+      return
+    }
+
+    fromEvent(window, 'resize')
+      .pipe(debounceTime(200))
+      .subscribe(() => this.onResize())
+  }
 }