diff --git a/src/layout/AppLayout.vue b/src/layout/AppLayout.vue index 3a0d72e..c0a74f9 100644 --- a/src/layout/AppLayout.vue +++ b/src/layout/AppLayout.vue @@ -2,6 +2,7 @@ import { computed, ref, watch } from 'vue' import { useRouter, useRoute, RouterView } from 'vue-router' import { useI18n } from 'vue-i18n' +import { useMediaQuery } from '@vueuse/core' import Menu from 'primevue/menu' import Button from 'primevue/button' import { useAuthStore } from '@/stores/auth' @@ -24,6 +25,15 @@ watch( }, ) +// Once the viewport reaches desktop the sidebar is always shown (lg:static), so +// the drawer flag is meaningless there. Reset it on the way up so a stale "open" +// can't carry back down to mobile and leave the sidebar stuck visible after a +// resize round-trip. +const isDesktop = useMediaQuery('(min-width: 1024px)') +watch(isDesktop, (desktop) => { + if (desktop) sidebarOpen.value = false +}) + // Account dropdown anchored on the header username. PrimeVue's Menu in popup // mode exposes toggle(event); type just that surface to avoid depending on an // unexported component type. @@ -122,16 +132,17 @@ function toggleLocale() {
-
{{ (route.meta.title as string | undefined) ?? route.name }}