From 19efde2b671bfe8bbbe2a1cb62fa701ca9e1738a Mon Sep 17 00:00:00 2001 From: Jason Antwi-Appah Date: Wed, 26 Jun 2024 22:05:01 -0500 Subject: [PATCH] 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 | 4 ++-- src/utils/useMediaQuery.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx index db2ca24..f7df1e4 100644 --- a/src/components/navbar.tsx +++ b/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(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', }} diff --git a/src/utils/useMediaQuery.ts b/src/utils/useMediaQuery.ts index 9c0632c..5860ca4 100644 --- a/src/utils/useMediaQuery.ts +++ b/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)