31 lines
967 B
TypeScript
31 lines
967 B
TypeScript
import { type FC, type ReactNode } from 'react'
|
|
import Header from './Header'
|
|
import SideBar from './Sidebar'
|
|
|
|
type AppLayoutProps = {
|
|
children: ReactNode
|
|
}
|
|
|
|
/**
|
|
* Authenticated app shell: fixed header + sidebar, one scrollable main column.
|
|
* Horizontal padding on the scrollport keeps content clear of the RTL scrollbar.
|
|
*/
|
|
const AppLayout: FC<AppLayoutProps> = ({ children }) => {
|
|
return (
|
|
<div className="box-border flex h-dvh flex-col overflow-hidden p-[var(--layout-frame)]">
|
|
<Header />
|
|
<SideBar />
|
|
|
|
<div className="flex min-h-0 flex-1 flex-col pt-[var(--layout-header-stack)] xl:ms-[var(--layout-main-offset)] xl:pt-[var(--layout-header-stack-xl)]">
|
|
<main className="app-main min-h-0 flex-1 overflow-y-auto overscroll-contain">
|
|
<div className="min-w-0 px-[var(--layout-content-pad-x)] pb-28 xl:pb-16">
|
|
{children}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default AppLayout
|