22 lines
694 B
JavaScript
22 lines
694 B
JavaScript
/**
|
|
* Reactive viewport media query. SSR-safe: defaults to true (mobile) so sidebar closed on first paint.
|
|
* @param {string} query - CSS media query, e.g. '(max-width: 767px)'
|
|
* @returns {import('vue').Ref<boolean>} Ref that is true when the media query matches.
|
|
*/
|
|
export function useMediaQuery(query) {
|
|
const matches = ref(true)
|
|
const mql = ref(null)
|
|
const handler = (e) => {
|
|
matches.value = e.matches
|
|
}
|
|
onMounted(() => {
|
|
mql.value = window.matchMedia(query)
|
|
matches.value = mql.value.matches
|
|
mql.value.addEventListener('change', handler)
|
|
})
|
|
onBeforeUnmount(() => {
|
|
if (mql.value) mql.value.removeEventListener('change', handler)
|
|
})
|
|
return matches
|
|
}
|