89 lines
2.7 KiB
TypeScript
89 lines
2.7 KiB
TypeScript
import { Flex, Box, Container, Dialog, Heading, IconButton, TextField } from '@radix-ui/themes';
|
|
import SidebarContent from '../components/layout/SidebarContent';
|
|
import { useLayout } from '../providers/LayoutProvider';
|
|
import { Menu, Search, Bell } from 'lucide-react';
|
|
import { Outlet } from 'react-router';
|
|
|
|
export default function LayoutContainer() {
|
|
const { activeTab, isMobileMenuOpen, setIsMobileMenuOpen } = useLayout();
|
|
return (
|
|
<Flex style={{ minHeight: '100vh', backgroundColor: 'var(--gray-2)' }}>
|
|
{/* Desktop Sidebar */}
|
|
<Box
|
|
display={{ initial: 'none', md: 'block' }}
|
|
style={{
|
|
width: '260px',
|
|
backgroundColor: 'white',
|
|
borderRight: '1px solid var(--gray-4)',
|
|
position: 'sticky',
|
|
top: 0,
|
|
minHeight: '100vh',
|
|
overflowY: 'auto',
|
|
}}
|
|
>
|
|
<SidebarContent />
|
|
</Box>
|
|
|
|
{/* Main Content Area */}
|
|
<Box style={{ flex: 1, minWidth: 0 }}>
|
|
{' '}
|
|
{/* Top Header (Mobile & Desktop) */}
|
|
<Flex
|
|
align="center"
|
|
justify="between"
|
|
px="4"
|
|
style={{
|
|
height: '64px',
|
|
backgroundColor: 'white',
|
|
borderBottom: '1px solid var(--gray-4)',
|
|
position: 'sticky',
|
|
top: 0,
|
|
zIndex: 10,
|
|
}}
|
|
>
|
|
<Flex align="center" gap="3">
|
|
<Box display={{ md: 'none' }}>
|
|
<Dialog.Root open={isMobileMenuOpen} onOpenChange={setIsMobileMenuOpen}>
|
|
<Dialog.Trigger>
|
|
<IconButton variant="ghost" color="gray">
|
|
<Menu />
|
|
</IconButton>
|
|
</Dialog.Trigger>
|
|
<Dialog.Content
|
|
style={{
|
|
position: 'fixed',
|
|
left: 0,
|
|
top: 0,
|
|
bottom: 0,
|
|
margin: 0,
|
|
width: '280px',
|
|
borderRadius: 0,
|
|
padding: 0,
|
|
}}
|
|
>
|
|
<SidebarContent />
|
|
</Dialog.Content>
|
|
</Dialog.Root>
|
|
</Box>
|
|
<Heading size="4">{activeTab}</Heading>
|
|
</Flex>
|
|
|
|
<Flex align="center" gap="3">
|
|
<TextField.Root placeholder="Search..." size="2">
|
|
<TextField.Slot>
|
|
<Search />
|
|
</TextField.Slot>
|
|
</TextField.Root>
|
|
<IconButton variant="ghost" color="gray">
|
|
<Bell />
|
|
</IconButton>
|
|
</Flex>
|
|
</Flex>
|
|
<Container size="4" p="5" style={{ paddingTop: 20 }}>
|
|
<Outlet />
|
|
</Container>
|
|
</Box>
|
|
</Flex>
|
|
);
|
|
}
|