fix: fix hydration caused by navbar mobile

src/components/layout/navbar-mobile.tsx

@@ -24,7 +24,7 @@ import {
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import * as React from 'react';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { RemoveScroll } from 'react-remove-scroll';
 import { Skeleton } from '../ui/skeleton';
 import { UserButtonMobile } from './user-button-mobile';
@@ -36,9 +36,14 @@ export function NavbarMobile({
   const t = useTranslations();
   const [open, setOpen] = React.useState<boolean>(false);
   const localePathname = useLocalePathname();
+  const [mounted, setMounted] = useState(false);
   const { data: session, isPending } = authClient.useSession();
   const currentUser = session?.user;
 
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
   useEffect(() => {
     const handleRouteChangeStart = () => {
       if (document.activeElement instanceof HTMLInputElement) {
@@ -67,6 +72,10 @@ export function NavbarMobile({
     setOpen((open) => !open);
   };
 
+  if (!mounted) {
+    return null;
+  }
+
   return (
     <>
       <div