File size: 2,111 Bytes
95b5a04 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | import { useEffect } from 'react';
import { Outlet } from 'react-router-dom';
// material-ui
import { useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Box from '@mui/material/Box';
// project imports
import Footer from './Footer';
import Header from './Header';
import Sidebar from './Sidebar';
import MainContentStyled from './MainContentStyled';
import Customization from '../Customization';
import Loader from 'ui-component/Loader';
import Breadcrumbs from 'ui-component/extended/Breadcrumbs';
import useConfig from 'hooks/useConfig';
import { handlerDrawerOpen, useGetMenuMaster } from 'api/menu';
// ==============================|| MAIN LAYOUT ||============================== //
export default function MainLayout() {
const theme = useTheme();
const downMD = useMediaQuery(theme.breakpoints.down('md'));
const {
state: { borderRadius, miniDrawer }
} = useConfig();
const { menuMaster, menuMasterLoading } = useGetMenuMaster();
const drawerOpen = menuMaster?.isDashboardDrawerOpened;
useEffect(() => {
handlerDrawerOpen(!miniDrawer);
}, [miniDrawer]);
useEffect(() => {
downMD && handlerDrawerOpen(false);
}, [downMD]);
// horizontal menu-list bar : drawer
if (menuMasterLoading) return <Loader />;
return (
<Box sx={{ display: 'flex' }}>
{/* header */}
<AppBar enableColorOnDark position="fixed" color="inherit" elevation={0} sx={{ bgcolor: 'background.default' }}>
<Toolbar sx={{ p: 2 }}>
<Header />
</Toolbar>
</AppBar>
{/* menu / drawer */}
<Sidebar />
{/* main content */}
<MainContentStyled {...{ borderRadius, open: drawerOpen }}>
<Box sx={{ ...{ px: { xs: 0 } }, minHeight: 'calc(100vh - 128px)', display: 'flex', flexDirection: 'column' }}>
{/* breadcrumb */}
<Breadcrumbs />
<Outlet />
<Footer />
</Box>
</MainContentStyled>
<Customization />
</Box>
);
}
|