diff --git a/src/composables/useMenuActive.ts b/src/composables/useMenuActive.ts index cfeed2ca1..fac40a2dc 100644 --- a/src/composables/useMenuActive.ts +++ b/src/composables/useMenuActive.ts @@ -1,5 +1,6 @@ import {ref, watch, readonly} from 'vue' import {useLocalStorage, useMediaQuery} from '@vueuse/core' +import {useRoute} from 'vue-router' const BULMA_MOBILE_BREAKPOINT = 768 @@ -15,7 +16,8 @@ export function useMenuActive() { ) const menuActive = ref(false) - + const route = useRoute() + // set to prefered value watch(isMobile, (current) => { menuActive.value = current @@ -31,6 +33,9 @@ export function useMenuActive() { } }) + // Hide the menu on mobile when the route changes (e.g. when the user taps a menu item) + watch(() => route.fullPath, () => isMobile.value && setMenuActive(false)) + function setMenuActive(newMenuActive: boolean) { menuActive.value = newMenuActive } @@ -44,4 +49,4 @@ export function useMenuActive() { setMenuActive, toggleMenu, } -} \ No newline at end of file +}