x

apps/spa/src/components/Navbar.tsx

@@ -27,6 +27,7 @@ export default function Navbar({ topOffsetClassName = 'top-0', isTransparent = f
   const [searchQuery, setSearchQuery] = useState('')
   const [scrolled, setScrolled] = useState(false)
   const [hasAnnouncement, setHasAnnouncement] = useState(false)
+  const [isClientReady, setIsClientReady] = useState(false)
   const [settings, setSettings] = useState<StoreSettings | null>(null)
   const navigate = useNavigate()
   
@@ -55,6 +56,7 @@ export default function Navbar({ topOffsetClassName = 'top-0', isTransparent = f
   }
 
   useEffect(() => {
+    setIsClientReady(true)
     fetchMegaMenu()
     
     const checkAnnouncement = () => {
@@ -173,7 +175,7 @@ export default function Navbar({ topOffsetClassName = 'top-0', isTransparent = f
           </div>
 
           {/* Center: Desktop mega menu */}
-          {isDesktop && (
+          {isClientReady && isDesktop && (
             <div className="flex-1 flex justify-center">
               <DesktopMegaMenu items={megaMenu} />
             </div>
@@ -219,7 +221,7 @@ export default function Navbar({ topOffsetClassName = 'top-0', isTransparent = f
               )}
             </button>
 
-            {isDesktop && (
+            {isClientReady && isDesktop && (
               <>
                 <div className="relative group flex items-center">
                   <button className="px-3 py-2 rounded-full text-[10px] font-bold transition-all text-pop-black border border-pop-black/20 hover:bg-pop-black/5 bg-pop-bg flex items-center gap-1.5 uppercase tracking-wider">
@@ -286,7 +288,7 @@ export default function Navbar({ topOffsetClassName = 'top-0', isTransparent = f
               </>
             )}
 
-            {!isDesktop && (
+            {isClientReady && !isDesktop && (
               <button
                 onClick={() => setMobileOpen(prev => !prev)}
                 className="p-1.5 rounded-full text-pop-black/80 hover:bg-pop-black/5 transition-all"
@@ -299,7 +301,7 @@ export default function Navbar({ topOffsetClassName = 'top-0', isTransparent = f
         </div>
       </nav>
 
-      {!isDesktop && (
+      {isClientReady && !isDesktop && mobileOpen && (
         <MobileDrawer 
           isOpen={mobileOpen} 
           onClose={() => setMobileOpen(false)} 
@@ -345,16 +347,13 @@ export default function Navbar({ topOffsetClassName = 'top-0', isTransparent = f
         </div>
       )}
 
+      {langSheetOpen && (
+        <div className="fixed inset-0 z-[110] md:hidden transition-all duration-300">
           <div
-        className={`fixed inset-0 z-[110] md:hidden transition-all duration-300 ${langSheetOpen ? 'visible' : 'invisible'}`}
+            className="absolute inset-0 bg-pop-black/40 backdrop-blur-sm transition-opacity duration-300"
-      >
-        <div
-          className={`absolute inset-0 bg-pop-black/40 backdrop-blur-sm transition-opacity duration-300 ${langSheetOpen ? 'opacity-100' : 'opacity-0'}`}
             onClick={() => setLangSheetOpen(false)}
           />
-        <div
+          <div className="absolute bottom-0 left-0 right-0 bg-pop-bg rounded-t-3xl transition-transform duration-300 shadow-2xl pb-safe">
-          className={`absolute bottom-0 left-0 right-0 bg-pop-bg rounded-t-3xl transition-transform duration-300 shadow-2xl pb-safe ${langSheetOpen ? 'translate-y-0' : 'translate-y-full'}`}
-        >
             <div className="flex justify-center pt-3 pb-1">
               <div className="w-12 h-1.5 bg-pop-black/20 rounded-full" />
             </div>
@@ -386,6 +385,7 @@ export default function Navbar({ topOffsetClassName = 'top-0', isTransparent = f
             </div>
           </div>
         </div>
+      )}
     </>
   )
 }

apps/website/src/components/Navbar.tsx

@@ -47,6 +47,8 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
   const [langSheetOpen, setLangSheetOpen] = useState(false)
   const [searchQuery, setSearchQuery] = useState('')
   const [scrolled, setScrolled] = useState(false)
+  const [isClientReady, setIsClientReady] = useState(false)
+  const [canRenderDesktopMenu, setCanRenderDesktopMenu] = useState(false)
   // Seed from server-fetched initialMenu — no client flash
   const [megaMenu] = useState<MegaMenuPayload[]>(initialMenu)
   const navRef = useRef<HTMLElement>(null)
@@ -153,6 +155,18 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
   const isHome = getPathWithoutLocale(pathname) === '/'
   const isTransparent = isHome && !scrolled && !mobileOpen && !searchOpen && !langSheetOpen
 
+  useEffect(() => {
+    setIsClientReady(true)
+
+    const mediaQuery = window.matchMedia('(min-width: 768px)')
+    const updateDesktopMenu = () => setCanRenderDesktopMenu(mediaQuery.matches)
+
+    updateDesktopMenu()
+    mediaQuery.addEventListener('change', updateDesktopMenu)
+
+    return () => mediaQuery.removeEventListener('change', updateDesktopMenu)
+  }, [])
+
   return (
     <>
       <nav
@@ -182,7 +196,9 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
           </div>
 
           <div className="flex flex-1 justify-center">
+            {canRenderDesktopMenu && (
               <DesktopMegaMenu items={menuItems} lang={lang} currentPath={pathname} />
+            )}
           </div>
 
           <div className="flex shrink-0 items-center gap-1.5 md:gap-2">
@@ -227,7 +243,9 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
               )}
             </button>
 
-            <div className="group relative hidden items-center md:flex">
+            {canRenderDesktopMenu && (
+              <>
+                <div className="group relative flex items-center">
                   <button className="ui-nav-chip">
                     <Globe className="h-3.5 w-3.5" strokeWidth={1.5} />
                     {activeLanguage.short}
@@ -253,7 +271,7 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
                   </div>
                 </div>
 
-            <div className="relative hidden items-center md:flex">
+                <div className="relative flex items-center">
                   {customer ? (
                     <Link href="/profile" className="ml-1">
                       {customer.pictureUrl ? (
@@ -280,18 +298,23 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
                     </button>
                   )}
                 </div>
+              </>
+            )}
 
+            {isClientReady && !canRenderDesktopMenu && (
               <button
                 onClick={() => setMobileOpen((prev) => !prev)}
-              className={`${iconButtonClass} md:hidden`}
+                className={iconButtonClass}
                 aria-label={mobileOpen ? 'Close menu' : 'Open menu'}
               >
                 {mobileOpen ? <X className="h-5 w-5" /> : <MenuIcon className="h-5 w-5" />}
               </button>
+            )}
           </div>
         </div>
       </nav>
 
+      {isClientReady && mobileOpen && (
         <MobileDrawer
           isOpen={mobileOpen}
           items={menuItems}
@@ -302,6 +325,7 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
           onLogin={loginWithLine}
           onLogout={logout}
         />
+      )}
 
       {searchOpen && (
         <div
@@ -356,16 +380,13 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
         </div>
       )}
 
-      <div className={`fixed inset-0 z-[110] transition-all duration-300 md:hidden ${langSheetOpen ? 'visible' : 'invisible'}`}>
+      {langSheetOpen && (
+        <div className="fixed inset-0 z-[110] transition-all duration-300 md:hidden">
           <div
-          className={`absolute inset-0 bg-text-main/40 backdrop-blur-sm transition-opacity duration-300 ${langSheetOpen ? 'opacity-100' : 'opacity-0'}`}
+            className="absolute inset-0 bg-text-main/40 backdrop-blur-sm transition-opacity duration-300"
             onClick={() => setLangSheetOpen(false)}
           />
-        <div
+          <div className="absolute bottom-0 left-0 right-0 rounded-t-3xl bg-surface-card shadow-2xl transition-transform duration-300">
-          className={`absolute bottom-0 left-0 right-0 rounded-t-3xl bg-surface-card shadow-2xl transition-transform duration-300 ${
-            langSheetOpen ? 'translate-y-0' : 'translate-y-full'
-          }`}
-        >
             <div className="flex justify-center pb-1 pt-3">
               <div className="h-1.5 w-12 rounded-full bg-text-main/15" />
             </div>
@@ -399,6 +420,7 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
             </div>
           </div>
         </div>
+      )}
     </>
   )
 }