feat(console): hide AppHeader/Footer on /console and fix sidebar to full-height absolute/fixed position

- Hide Header and Footer components automatically when navigating to /console routes
- Set AdminLayout sidebar to fixed full-height navigation (md:fixed md:top-0 md:left-0 md:h-screen)
- Offset main dashboard content (md:ml-64) with independent scroll container
- Passed all 12 E2E and quality gates cleanly
This commit is contained in:
2026-08-25 15:19:32 +09:00
parent 575fbdb6de
commit 5285e3fd02
4 changed files with 21 additions and 8 deletions
+7 -7
View File
@@ -93,9 +93,9 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
return (
<div className="min-h-screen bg-ivory text-ink flex flex-col md:flex-row">
{/* Sidebar */}
<aside className="w-full md:w-64 bg-paper border-r border-line flex flex-col shrink-0">
<div className="p-6 border-b border-line">
{/* Fixed Sidebar */}
<aside className="w-full md:w-64 md:fixed md:top-0 md:left-0 md:bottom-0 md:h-screen bg-paper border-r border-line flex flex-col shrink-0 z-30 overflow-y-auto">
<div className="p-6 border-b border-line shrink-0">
<div className="flex items-center justify-between">
<span className="font-bold text-lg text-cobalt tracking-tight">ANL Console</span>
<span className="text-xs bg-cobalt/10 text-cobalt font-medium px-2 py-0.5 rounded">Admin</span>
@@ -103,7 +103,7 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
<p className="text-xs text-ink/60 mt-1">Lab Data Management</p>
</div>
<nav className="p-4 space-y-1 flex-1">
<nav className="p-4 space-y-1 flex-1 overflow-y-auto">
{navItems.map((item) => {
const isActive = pathname === item.href;
return (
@@ -122,7 +122,7 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
})}
</nav>
<div className="p-4 border-t border-line space-y-2">
<div className="p-4 border-t border-line space-y-2 shrink-0 bg-paper">
<Link
href="/"
className="block w-full text-center px-3 py-2 text-xs font-medium rounded border border-line hover:bg-ivory text-ink/80"
@@ -138,8 +138,8 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
</div>
</aside>
{/* Main Content Area */}
<main className="flex-1 p-6 md:p-10 max-w-7xl overflow-x-auto">{children}</main>
{/* Main Content Area with offset for fixed sidebar */}
<main className="flex-1 md:ml-64 p-6 md:p-10 min-h-screen overflow-x-auto">{children}</main>
</div>
);
}