31 lines
816 B
TypeScript
31 lines
816 B
TypeScript
import { Outlet } from 'react-router-dom'
|
|
import { Header } from './Header'
|
|
import { Sidebar } from './Sidebar'
|
|
import { BottomTabBar } from './BottomTabBar'
|
|
|
|
export function AppShell() {
|
|
return (
|
|
<div className="flex flex-col h-screen overflow-hidden bg-[var(--c-surface-muted)]">
|
|
{/* Top header — full width, always visible */}
|
|
<Header />
|
|
|
|
<div className="flex flex-1 overflow-hidden">
|
|
{/* Desktop sidebar */}
|
|
<Sidebar className="hidden md:flex flex-col" />
|
|
|
|
{/* Main content */}
|
|
<main
|
|
id="main-content"
|
|
className="flex-1 overflow-y-auto pb-14 md:pb-0"
|
|
tabIndex={-1}
|
|
>
|
|
<Outlet />
|
|
</main>
|
|
</div>
|
|
|
|
{/* Mobile bottom tab bar */}
|
|
<BottomTabBar className="md:hidden" />
|
|
</div>
|
|
)
|
|
}
|