minor: new nav system (#5)

Co-authored-by: Madison Grubb <madison@elastiflow.com>
Reviewed-on: #5

app/composables/useMediaQuery.js

@@ -0,0 +1,21 @@
+/**
+ * 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
+}