46 lines
1.3 KiB
JavaScript
46 lines
1.3 KiB
JavaScript
import { useState } from 'react';
|
|
import { Outlet } from 'react-router-dom';
|
|
import { Box, Toolbar, useMediaQuery } from '@mui/material';
|
|
import { useTheme } from '@mui/material/styles';
|
|
|
|
import Header from './Header';
|
|
import Sidebar, { DRAWER_WIDTH, MINI_WIDTH } from './Sidebar';
|
|
|
|
export default function MainLayout() {
|
|
const theme = useTheme();
|
|
const isMobile = useMediaQuery(theme.breakpoints.down('lg'));
|
|
const [open, setOpen] = useState(true);
|
|
const [mobileOpen, setMobileOpen] = useState(false);
|
|
|
|
const toggle = () => {
|
|
if (isMobile) setMobileOpen((p) => !p);
|
|
else setOpen((p) => !p);
|
|
};
|
|
|
|
return (
|
|
<Box sx={{ display: 'flex', bgcolor: 'background.default', minHeight: '100vh' }}>
|
|
<Header onToggle={toggle} />
|
|
<Sidebar
|
|
open={open}
|
|
isMobile={isMobile}
|
|
mobileOpen={mobileOpen}
|
|
onMobileClose={() => setMobileOpen(false)}
|
|
/>
|
|
<Box
|
|
component="main"
|
|
sx={{
|
|
flexGrow: 1,
|
|
width: { lg: `calc(100% - ${open ? DRAWER_WIDTH : MINI_WIDTH}px)` },
|
|
minHeight: '100vh',
|
|
transition: theme.transitions.create('width', { duration: theme.transitions.duration.standard })
|
|
}}
|
|
>
|
|
<Toolbar sx={{ minHeight: 64 }} />
|
|
<Box sx={{ p: { xs: 2, sm: 3 } }}>
|
|
<Outlet />
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|