78 lines
2.1 KiB
TypeScript
78 lines
2.1 KiB
TypeScript
import { ReactNode } from 'react';
|
|
import { Box } from './Box';
|
|
|
|
export interface LayoutProps {
|
|
children: ReactNode;
|
|
header?: ReactNode;
|
|
footer?: ReactNode;
|
|
sidebar?: ReactNode;
|
|
fixedSidebar?: boolean;
|
|
fixedHeader?: boolean;
|
|
fixedFooter?: boolean;
|
|
}
|
|
|
|
/**
|
|
* Layout is the canonical app frame component.
|
|
* Redesigned for "Cockpit" layout: Sidebar is primary (full height), Header and Content sit to the right.
|
|
*/
|
|
export const Layout = ({
|
|
children,
|
|
header,
|
|
footer,
|
|
sidebar,
|
|
fixedSidebar = true,
|
|
fixedHeader = true,
|
|
fixedFooter = true // Default to true for AppShellBar
|
|
}: LayoutProps) => {
|
|
return (
|
|
<Box display="flex" minHeight="100vh" className="bg-base-black text-text-high">
|
|
{/* Sidebar - Primary Vertical Axis - Solid Background */}
|
|
{sidebar && (
|
|
<Box
|
|
as="aside"
|
|
width="64" // 16rem / 256px
|
|
display={{ base: 'none', lg: 'block' }}
|
|
position={fixedSidebar ? "fixed" : "relative"}
|
|
top={0}
|
|
bottom={0}
|
|
left={0}
|
|
zIndex={50}
|
|
className="bg-base-black border-r border-outline-steel"
|
|
>
|
|
{sidebar}
|
|
</Box>
|
|
)}
|
|
|
|
{/* Main Content Area - Right of Sidebar */}
|
|
<Box
|
|
display="flex"
|
|
flexDirection="col"
|
|
flex={1}
|
|
marginLeft={fixedSidebar && sidebar ? { lg: 64 } : undefined}
|
|
minWidth="0" // Prevent flex child overflow
|
|
>
|
|
{/* Header - Rendered directly as it contains AppShellBar (fixed) */}
|
|
{header}
|
|
|
|
{/* Main Scrollable Content */}
|
|
<Box
|
|
as="main"
|
|
flex={1}
|
|
display="flex"
|
|
flexDirection="col"
|
|
position="relative"
|
|
marginTop={fixedHeader ? 14 : 0} // Offset for fixed header (h-14)
|
|
paddingBottom={fixedFooter ? 14 : 0} // Offset for fixed footer (h-14)
|
|
>
|
|
<Box flex={1} p={0}>
|
|
{children}
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Footer - Rendered directly as it contains AppShellBar (fixed) */}
|
|
{footer}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|