38 lines
868 B
JavaScript
38 lines
868 B
JavaScript
|
import { Outlet } from "react-router-dom";
|
||
|
|
import { Box, Toolbar } from "@mui/material";
|
||
|
|
import colorConfigs from "../configs/colorConfigs";
|
||
|
|
import sizeConfigs from "../configs/sizeConfigs";
|
||
|
|
import Sidebar from "./nav/Sidebar";
|
||
|
|
import Topbar from "./nav/Topbar";
|
||
|
|
|
||
|
|
const MainLayout = () => {
|
||
|
|
return (
|
||
|
|
<Box sx={{ display: "flex" }}>
|
||
|
|
<Topbar />
|
||
|
|
<Box
|
||
|
|
component="nav"
|
||
|
|
sx={{
|
||
|
|
width: sizeConfigs.sidebar.width,
|
||
|
|
flexShrink: 0
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Sidebar />
|
||
|
|
</Box>
|
||
|
|
<Box
|
||
|
|
component="main"
|
||
|
|
sx={{
|
||
|
|
flexGrow: 1,
|
||
|
|
p: 3,
|
||
|
|
width: `calc(100% - ${sizeConfigs.sidebar.width})`,
|
||
|
|
minHeight: "100vh",
|
||
|
|
backgroundColor: colorConfigs.mainBg
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Toolbar />
|
||
|
|
<Outlet />
|
||
|
|
</Box>
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default MainLayout;
|