fix hydration issue with media queries

Author: pettinarip

src/components/MediaQuery.tsx

@@ -0,0 +1,41 @@
+"use client"
+
+import { type ReactNode } from "react"
+
+import { useMediaQuery } from "@/hooks/useMediaQuery"
+
+type MediaQueryChildren =
+  | ((args: { matches: boolean[]; any: boolean }) => ReactNode)
+  | ReactNode
+
+type MediaQueryProps = {
+  /**
+   * Array of CSS media query strings, e.g. ["(min-width: 768px)"]
+   */
+  queries: string[]
+  /**
+   * Optional SSR fallbacks for each query. If omitted, defaults to false.
+   */
+  fallbackMatches?: boolean[]
+  /**
+   * Either render props or slot children
+   */
+  children: MediaQueryChildren
+}
+
+const MediaQuery = ({
+  queries,
+  fallbackMatches,
+  children,
+}: MediaQueryProps) => {
+  const matches = useMediaQuery(queries, fallbackMatches)
+  const any = matches.some(Boolean)
+
+  if (typeof children === "function") {
+    return <>{children({ matches, any })}</>
+  }
+
+  return <>{any ? children : null}</>
+}
+
+export default MediaQuery

src/components/Nav/index.tsx

@@ -2,7 +2,10 @@ import { getTranslations } from "next-intl/server"
 
 import { EthHomeIcon } from "@/components/icons"
 
+import { breakpointAsNumber } from "@/lib/utils/screen"
+
 import ClientOnly from "../ClientOnly"
+import MediaQuery from "../MediaQuery"
 import { BaseLink } from "../ui/Link"
 
 import DesktopNav from "./DesktopNav"
@@ -28,10 +31,14 @@ const Nav = async () => {
 
       <div className="ms-3 flex w-full justify-end md:justify-between xl:ms-8">
         <ClientOnly fallback={<DesktopNavLoading />}>
-          <DesktopNav className="hidden md:flex" />
+          <MediaQuery queries={[`(min-width: ${breakpointAsNumber.md}px)`]}>
+            <DesktopNav />
+          </MediaQuery>
         </ClientOnly>
         <ClientOnly fallback={<MobileNavLoading />}>
-          <MobileNav className="flex md:hidden" />
+          <MediaQuery queries={[`(max-width: ${breakpointAsNumber.md - 1}px)`]}>
+            <MobileNav />
+          </MediaQuery>
         </ClientOnly>
       </div>
     </nav>