62 lines
1.6 KiB
TypeScript
62 lines
1.6 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>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|