Blocked scroll when mobile menu is open

src/App.vue

@@ -26,6 +26,7 @@
 </template>
 
 <script>
+import DomHandler from '@/components/utils/DomHandler';
 import AppTopBar from '@/AppTopBar.vue';
 import AppMenu from '@/AppMenu.vue';
 import AppFooter from '@/AppFooter.vue';
@@ -40,7 +41,6 @@ export default {
             theme: 'saga-blue'
         }
     },
-
     mounted() {
         if (this.isOutdatedIE()) {
             this.$toast.add({severity: 'warn', summary: 'Limited Functionality', detail: 'Although PrimeVue supports IE11, ThemeSwitcher in this application cannot be not fully supported by your browser. Please use a modern browser for the best experience of the showcase.'});
@@ -58,16 +58,25 @@ export default {
                 }
 
                 this.sidebarActive = false;
+                DomHandler.removeClass(document.body, 'blocked-scroll');
                 this.$toast.removeAllGroups();
             }
         }
     },
     methods: {
         onMenuButtonClick() {
-            this.sidebarActive = !this.sidebarActive;
+            if (this.sidebarActive) {
+                this.sidebarActive = false;
+                DomHandler.removeClass(document.body, 'blocked-scroll');
+            }
+            else {
+                this.sidebarActive = true;
+                DomHandler.addClass(document.body, 'blocked-scroll');
+            }
         },
         onMaskClick() {
             this.sidebarActive = false;
+            DomHandler.removeClass(document.body, 'blocked-scroll');
         },
         hideNews() {
             this.newsActive = false;

src/assets/styles/app/_core.scss

@@ -1,15 +1,3 @@
-@keyframes pulse {
-    0% {
-        background-color: rgba(165, 165, 165, 0.1)
-    }
-    50% {
-        background-color: rgba(165, 165, 165, 0.3)
-    }
-    100% {
-        background-color: rgba(165, 165, 165, 0.1)
-    }
-}
-
 $linkColor: #2196f3;
 $focusBorderColor:#BBDEFB;
 
@@ -44,21 +32,6 @@ a {
     text-decoration: none;
 }
 
-.layout-mask {
-    background-color: rgba(0, 0, 0, 0.1);
-}
-
-.layout-mask-active {
-    z-index: 998;
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    top: 0;
-    left: 0;
-    background-color: rgba(0, 0, 0, 0.4);
-    transition: background-color .5s;
-}
-
 .clearfix {
     display: inline-block;
 
@@ -79,28 +52,15 @@ a {
     display: block;
 }
 
-/* Animation */
-@-webkit-keyframes fadeInDown {
-    from {
-        opacity: 0;
-        transform: translate3d(0, -20px, 0);
+@keyframes pulse {
+    0% {
+        background-color: rgba(165, 165, 165, 0.1)
     }
-
-    to {
-        opacity: 1;
-        transform: none;
+    50% {
+        background-color: rgba(165, 165, 165, 0.3)
     }
-}
-
-@keyframes fadeInDown {
-    from {
-        opacity: 0;
-        transform: translate3d(0, -20px, 0);
-    }
-
-    to {
-        opacity: 1;
-        transform: none;
+    100% {
+        background-color: rgba(165, 165, 165, 0.1)
     }
 }
 

src/assets/styles/app/_responsive.scss

@@ -90,7 +90,21 @@
                 }
             }
         }
+    }
 
+    .layout-mask {
+        background-color: rgba(0, 0, 0, 0.1);
+    }
+    
+    .layout-mask-active {
+        z-index: 998;
+        width: 100%;
+        height: 100%;
+        position: fixed;
+        top: 0;
+        left: 0;
+        background-color: rgba(0, 0, 0, 0.4);
+        transition: background-color .5s;
     }
 
     .home {
@@ -129,6 +143,10 @@
             transform: translate3d(0,0,0);
         }
     }
+
+    .blocked-scroll {
+        overflow: hidden;
+    }
 }
 
 @media screen and (max-width: 640px) {