Slightly scuffed implementation of mobile navbar

src/layouts/base.astro

@@ -6,7 +6,7 @@ import '../styles/reset.css'
 import '../styles/index.css'
 import '../styles/App.css'
 
-import Navbar from '../components/navbar.astro'
+import Navbar from '../components/navbar'
 import Footer from '../components/footer.astro'
 
 interface Props {
@@ -41,7 +41,7 @@ import { ViewTransitions } from 'astro:transitions';
     />
     <ViewTransitions />
   </head>
-  <Navbar />
+  <Navbar client:load transition:persist />
   <main>
     <slot />
     <Footer />

src/utils/useMediaQuery.ts

@@ -0,0 +1,16 @@
+import { useEffect, useState } from 'react'
+
+function useMedia(query: string) {
+  const [matches, setMatches] = useState(false)
+  useEffect(() => {
+    const media = window.matchMedia(query)
+    const listener = () => setMatches(media.matches)
+    listener()
+    media.addEventListener('change', listener)
+
+    return () => media.removeEventListener('change', listener)
+  }, [matches, query])
+  return matches
+};
+
+export default useMedia