[CHOPS-888] disabled scrolling when mobile menu is open (#2004)

* disabled scrolling when mobile menu is open

* bumped to 2.8.15

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebury/chameleon-components",
-  "version": "2.8.14",
+  "version": "2.8.15",
   "main": "src/main.ts",
   "sideEffects": false,
   "author": "Ebury Team (http://labs.ebury.rocks/)",

src/components/ec-navigation/ec-navigation.spec.ts

@@ -143,13 +143,17 @@ describe('EcNavigation', () => {
         },
       });
 
+      expect(document.body.style.overflow).not.toBe('hidden');
+
       // Open mobile menu first
       await wrapper.findByDataTest('ec-mobile-header__menu').trigger('click');
       expect(wrapper.element).toMatchSnapshot('before');
+      expect(document.body.style.overflow).toBe('hidden');
 
       // Close navigation when a menu item is clicked
       await wrapper.findByDataTest('my-custom-link').trigger('click');
       expect(wrapper.element).toMatchSnapshot('after');
+      expect(document.body.style.overflow).not.toBe('hidden');
     });
   });
 });

src/components/ec-navigation/ec-navigation.vue

@@ -120,7 +120,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { useScrollLock } from '@vueuse/core';
+import { ref, watch } from 'vue';
 
 import EcIcon from '../ec-icon';
 import { IconName } from '../ec-icon/types';
@@ -133,6 +134,13 @@ defineOptions({
   inheritAttrs: false,
 });
 
+const scrollLockTarget = ref(document.body);
+const isLocked = useScrollLock(scrollLockTarget);
+
+watch(isMobileMenuOpen, (newValue) => {
+  isLocked.value = newValue;
+});
+
 withDefaults(defineProps<NavigationProps>(), {
   showBrandingLogo: true,
 });