From 8ca875e6ada3e1d20de49dbc8631a60afd88836f Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Mon, 18 May 2026 14:22:55 +0800
Subject: [PATCH] fix(web): keep navigation shell before hydration

---
 apps/web/src/components/layout/app-layout.tsx | 25 +++++--------------
 1 file changed, 6 insertions(+), 19 deletions(-)

diff --git a/apps/web/src/components/layout/app-layout.tsx b/apps/web/src/components/layout/app-layout.tsx
index d97d4cdd..4fcdce19 100644
--- a/apps/web/src/components/layout/app-layout.tsx
+++ b/apps/web/src/components/layout/app-layout.tsx
@@ -85,22 +85,9 @@ export function AppLayout({
     localStorage.setItem(SIDEBAR_STATE_KEY, String(newState))
   }
 
-  // Prevent hydration mismatch
-  if (!mounted) {
-    return (
-      <div className="min-h-screen bg-nothing-gray-50">
-        {showBackground && (
-          <DotMatrixBg
-            spacing={24}
-            dotSize={1}
-            dotColor="rgba(0, 0, 0, 0.06)"
-            bgColor="#FAFAFA"
-          />
-        )}
-        <div className="relative z-10">{children}</div>
-      </div>
-    )
-  }
+  // Keep the navigation shell in the server-rendered HTML. If a rolling deploy
+  // or stale browser cache delays hydration, the operator still has navigation.
+  const effectiveCollapsed = mounted ? collapsed : false
 
   return (
     <div className="min-h-screen bg-nothing-gray-50">
@@ -117,14 +104,14 @@ export function AppLayout({
       {/* Sidebar */}
       <Sidebar
         locale={locale}
-        collapsed={collapsed}
+        collapsed={effectiveCollapsed}
         onToggle={handleToggle}
       />
 
       {/* Header */}
       <Header
         locale={locale}
-        sidebarCollapsed={collapsed}
+        sidebarCollapsed={effectiveCollapsed}
       />
 
       {/* Main Content */}
@@ -133,7 +120,7 @@ export function AppLayout({
           'relative z-10',
           'pt-[68px]',
           'transition-all duration-300 ease-out',
-          collapsed ? 'ml-16' : 'ml-[224px]'
+          effectiveCollapsed ? 'ml-16' : 'ml-[224px]'
         )}
       >
         {fullBleed ? (