Client - hide scrollbar when menu is open on mobile

fittrackee_client/src/App.vue

@@ -1,11 +1,11 @@
 <template>
-  <NavBar />
+  <NavBar @menuInteraction="updateHideScrollBar" />
   <div v-if="appLoading" class="app-container">
     <div class="app-loading">
       <Loader />
     </div>
   </div>
-  <div v-else class="app-container">
+  <div v-else class="app-container" :class="{ 'hide-scroll': hideScrollBar }">
     <router-view v-if="appConfig" />
     <NoConfig v-else />
   </div>
@@ -28,7 +28,13 @@
     LinearScale,
   } from 'chart.js'
   import ChartDataLabels from 'chartjs-plugin-datalabels'
-  import { computed, ComputedRef, defineComponent, onBeforeMount } from 'vue'
+  import {
+    ComputedRef,
+    computed,
+    defineComponent,
+    ref,
+    onBeforeMount,
+  } from 'vue'
 
   import Loader from '@/components/Common/Loader.vue'
   import Footer from '@/components/Footer.vue'
@@ -63,18 +69,28 @@
     },
     setup() {
       const store = useStore()
+
       const appConfig: ComputedRef<IAppConfig> = computed(
         () => store.getters[ROOT_STORE.GETTERS.APP_CONFIG]
       )
       const appLoading: ComputedRef<boolean> = computed(
         () => store.getters[ROOT_STORE.GETTERS.APP_LOADING]
       )
+      const hideScrollBar = ref(false)
+
+      function updateHideScrollBar(isMenuOpen: boolean) {
+        hideScrollBar.value = isMenuOpen
+      }
+
       onBeforeMount(() =>
         store.dispatch(ROOT_STORE.ACTIONS.GET_APPLICATION_CONFIG)
       )
+
       return {
         appConfig,
         appLoading,
+        hideScrollBar,
+        updateHideScrollBar,
       }
     },
   })
@@ -85,6 +101,10 @@
   .app-container {
     height: $app-height;
 
+    &.hide-scroll {
+      overflow: hidden;
+    }
+
     .app-loading {
       display: flex;
       align-items: center;

fittrackee_client/src/components/NavBar.vue

@@ -89,7 +89,8 @@
     components: {
       Dropdown,
     },
-    setup() {
+    emits: ['menuInteraction'],
+    setup(props, { emit }) {
       const { t, locale, availableLocales } = useI18n()
       const store = useStore()
 
@@ -116,9 +117,11 @@
 
       function openMenu() {
         isMenuOpen.value = true
+        emit('menuInteraction', true)
       }
       function closeMenu() {
         isMenuOpen.value = false
+        emit('menuInteraction', false)
       }
       function updateLanguage(option: IDropdownOption) {
         locale.value = option.value.toString()
@@ -282,7 +285,7 @@
         display: flex;
         flex-direction: column;
         justify-content: flex-start;
-        z-index: 1;
+        z-index: 1001;
 
         position: absolute;
         top: 0;