102 lines
2.3 KiB
TypeScript
102 lines
2.3 KiB
TypeScript
import { ReactNode } from 'react';
|
|
import { Box } from '../Box';
|
|
|
|
// --- Shell Sidebar ---
|
|
|
|
interface ShellSidebarProps {
|
|
children: ReactNode;
|
|
header?: ReactNode;
|
|
footer?: ReactNode;
|
|
collapsed?: boolean;
|
|
width?: string | number;
|
|
collapsedWidth?: string | number;
|
|
}
|
|
|
|
export function ShellSidebar({
|
|
children,
|
|
header,
|
|
footer,
|
|
collapsed = false,
|
|
width = '16rem',
|
|
collapsedWidth = '5rem'
|
|
}: ShellSidebarProps) {
|
|
return (
|
|
<Box
|
|
as="aside"
|
|
display="flex"
|
|
flexDirection="col"
|
|
height="full"
|
|
className="bg-base-black border-r border-white/10 relative transition-all duration-300 ease-in-out"
|
|
style={{ width: collapsed ? collapsedWidth : width }}
|
|
>
|
|
{header && (
|
|
<Box p={6} pb={8} display="flex" alignItems="center" justifyContent={collapsed ? 'center' : 'start'}>
|
|
{header}
|
|
</Box>
|
|
)}
|
|
|
|
<Box flex={1} px={collapsed ? 2 : 4} className="overflow-y-auto scrollbar-hide transition-all duration-300">
|
|
{children}
|
|
</Box>
|
|
|
|
{footer && (
|
|
<Box className="h-14 flex items-center px-4 border-t border-white/10">
|
|
{footer}
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
// --- Shell Header ---
|
|
|
|
interface ShellHeaderProps {
|
|
children: ReactNode;
|
|
collapsed?: boolean;
|
|
}
|
|
|
|
export function ShellHeader({ children, collapsed = false }: ShellHeaderProps) {
|
|
return (
|
|
<Box
|
|
as="header"
|
|
className={`
|
|
fixed top-0 right-0 z-40
|
|
h-14
|
|
bg-base-black/80 backdrop-blur-xl
|
|
border-b border-white/10
|
|
flex items-center justify-between px-6
|
|
transition-all duration-300 ease-in-out
|
|
left-0 ${collapsed ? 'lg:left-20' : 'lg:left-64'}
|
|
`}
|
|
>
|
|
{children}
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
// --- Shell Footer ---
|
|
|
|
interface ShellFooterProps {
|
|
children: ReactNode;
|
|
collapsed?: boolean;
|
|
}
|
|
|
|
export function ShellFooter({ children, collapsed = false }: ShellFooterProps) {
|
|
return (
|
|
<Box
|
|
as="footer"
|
|
className={`
|
|
fixed bottom-0 right-0 z-40
|
|
h-14
|
|
bg-base-black/80 backdrop-blur-xl
|
|
border-t border-white/10
|
|
flex items-center justify-between px-6
|
|
transition-all duration-300 ease-in-out
|
|
left-0 ${collapsed ? 'lg:left-20' : 'lg:left-64'}
|
|
`}
|
|
>
|
|
{children}
|
|
</Box>
|
|
);
|
|
}
|