Default to mobile navbar before client hydration

for the 2 people that will open this website from a desktop without javascript enabled and want to switch between breakpoints

src/components/navbar.tsx

@@ -6,7 +6,7 @@ const menuBg = 'var(--text-dark)'
 const gradBg = 'linear-gradient(180deg, rgba(0, 0, 0, 0.67) 0%, rgba(0, 0, 0, 0.00) 100%)'
 
 function Navbar() {
-  const mobile = useMedia('(max-width: 800px)')
+  const mobile = useMedia('(max-width: 800px)', true)
   const detailsRef = useRef<HTMLDetailsElement>(null)
   const [detailsOpen, _setDetailsOpen] = useState(false)
   useEffect(() => {
@@ -118,7 +118,7 @@ function NavLinks(props: { mobile: boolean }) {
         left: mobile ? 0 : 'inherit',
         zIndex: mobile ? 90 : 'inherit',
         width: mobile ? '100vw' : 'min-content',
-        height: mobile ? '100vh' : 'inherit',
+        height: mobile ? 'calc(100vh - 200px)' : 'inherit',
         alignItems: 'center',
         fontFamily: '\'Mashine\', sans-serif',
       }}

src/utils/useMediaQuery.ts

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 
-function useMedia(query: string) {
-  const [matches, setMatches] = useState(false)
+function useMedia(query: string, defaultMatches = false) {
+  const [matches, setMatches] = useState(defaultMatches)
   useEffect(() => {
     const media = window.matchMedia(query)
     const listener = () => setMatches(media.matches)