fix(web): keep navigation shell before hydration
This commit is contained in:
@@ -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 ? (
|
||||
|
||||
Reference in New Issue
Block a user