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, 23 insertions, 0 deletions

diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 308a28658..a3b60198c 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -150,6 +150,29 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
   width: 100vw; // Make sure the content fits all the available width
 }
 
+// On touchscreen devices, simply overflow: hidden to avoid detached overlay on scroll
+@media (hover: none) and (pointer: coarse) {
+  .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') - 1;
+      }
+    }
+  }
+}
+
 // Nav customizations
 .nav .nav-link {
   display: flex !important;