Add content overlay on touchscreens when menu is opened

Chocobozzz · Aug 15, 2020 · c59b170 · c59b170
1 parent 275df8d
commit c59b170
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 5 deletions.
diff --git a/client/src/app/core/menu/menu.service.ts b/client/src/app/core/menu/menu.service.ts
@@ -17,9 +17,7 @@ export class MenuService {
       this.setMenuDisplay(false)
     }
 
-    fromEvent(window, 'resize')
-      .pipe(debounceTime(200))
-      .subscribe(() => this.onResize())
+    this.handleWindowResize()
   }
 
   toggleMenu () {
@@ -29,9 +27,29 @@ export class MenuService {
 
   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')
+      } else {
+        document.body.classList.remove('menu-open')
+      }
+    }
   }
 
   onResize () {
-    this.isMenuDisplayed = window.innerWidth >= 800 && !this.screenService.isInTouchScreen() && !this.isMenuChangedByUser
+    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())
   }
 }
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
@@ -152,9 +152,25 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 
 // On touchscreen devices, simply overflow: hidden to avoid detached overlay on scroll
 @media (hover: none) and (pointer: coarse) {
-  .modal-open {
+  .modal-open, .menu-open {
     overflow: hidden !important;
   }
+
+  // On touchscreen devices display content overlay when opened menu
+  .menu-open {
+    .main-col {
+      &::before {
+        background-color: black;
+        width: 100vw;
+        height: 100vh;
+        opacity: 0.75;
+        content: '';
+        display: block;
+        position: fixed;
+        z-index: z('header');
+      }
+    }
+  }
 }
 
 // Nav customizations