/**
 * 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)
  let mql = null
  const handler = (e) => {
    matches.value = e.matches
  }
  onMounted(() => {
    mql = window.matchMedia(query)
    matches.value = mql.matches
    mql.addEventListener('change', handler)
  })
  onBeforeUnmount(() => {
    if (mql) mql.removeEventListener('change', handler)
  })
  return matches
}