From 1b06112db4ba5ad4144b5868dd04e954be1d77f7 Mon Sep 17 00:00:00 2001 From: Dan Stewart Date: Sun, 5 Mar 2023 17:24:28 +0000 Subject: [PATCH] fix: collapse menu on mobile when path changes --- src/composables/useMenuActive.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) 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 +}