70 lines
1.7 KiB
TypeScript
70 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import Box from '@mui/material/Box';
|
|
import useMediaQuery from '@mui/material/useMediaQuery';
|
|
import { useTheme } from '@mui/material/styles';
|
|
import { styled } from '@mui/material/styles';
|
|
import Sidebar from '../sidebar/Sidebar';
|
|
import Header from '../header/Header';
|
|
import { useCustomizerStore } from '../store/useCustomizerStore';
|
|
|
|
interface DashboardLayoutProps {
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
interface StyledMainProps {
|
|
isMobile?: boolean;
|
|
}
|
|
|
|
const StyledMain = styled(Box, {
|
|
shouldForwardProp: (prop) => prop !== 'isMobile',
|
|
})<StyledMainProps>(({ theme, isMobile }) => ({
|
|
flexGrow: 1,
|
|
padding: theme.spacing(3),
|
|
overflow: 'auto',
|
|
backgroundColor: theme.palette.background.default,
|
|
...(isMobile && {
|
|
paddingTop: theme.spacing(1),
|
|
}),
|
|
}));
|
|
|
|
export default function DashboardLayout({ children }: DashboardLayoutProps) {
|
|
const theme = useTheme();
|
|
const lgUp = useMediaQuery(theme.breakpoints.up('lg'));
|
|
const { isHydrated } = useCustomizerStore();
|
|
|
|
if (!isHydrated) {
|
|
return (
|
|
<Box sx={{ display: 'flex', height: '100vh' }}>
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
flexGrow: 1,
|
|
overflow: 'hidden',
|
|
}}
|
|
>
|
|
<StyledMain isMobile={!lgUp}>{children}</StyledMain>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Box sx={{ display: 'flex', height: '100vh' }}>
|
|
<Sidebar />
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
flexGrow: 1,
|
|
overflow: 'hidden',
|
|
}}
|
|
>
|
|
<Header />
|
|
<StyledMain isMobile={!lgUp}>{children}</StyledMain>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|