fix: collapse menu on mobile when path changes

This commit is contained in:
Dan Stewart 2023-03-05 17:24:28 +00:00 committed by Gitea
parent 0952f059c0
commit 1b06112db4

View File

@ -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,
}
}
}