77 lines
1.6 KiB
TypeScript
77 lines
1.6 KiB
TypeScript
import * as React from "react";
|
|
import { Box, Stack } from "@mui/material";
|
|
import { Outlet } from "react-router-dom";
|
|
import SideMenu from "../../components/SideMenu";
|
|
import AppNavbar from "../../components/AppNavbar";
|
|
import Header from "../../components/Header";
|
|
import AppTheme from "../../shared-theme/AppTheme";
|
|
|
|
interface LayoutProps {
|
|
customStyles?: React.CSSProperties;
|
|
}
|
|
|
|
const DashboardLayout: React.FC<LayoutProps> = ({ customStyles }) => {
|
|
return (
|
|
<AppTheme>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
height: "auto",
|
|
flexDirection: { xs: "column", md: "row" },
|
|
width: "100%",
|
|
margin: 0,
|
|
padding: 0,
|
|
}}
|
|
>
|
|
{/* SideMenu - Responsive, shown only on large screens */}
|
|
<Box
|
|
sx={{
|
|
display: { xs: "none", md: "block" },
|
|
// width: 250,
|
|
}}
|
|
>
|
|
<SideMenu />
|
|
</Box>
|
|
|
|
{/* Navbar - Always visible */}
|
|
<AppNavbar />
|
|
|
|
<Box
|
|
component="main"
|
|
sx={(theme) => ({
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
height: "100vh",
|
|
flexGrow: 1,
|
|
backgroundColor: theme.vars
|
|
? `rgba(${theme.vars.palette.background.defaultChannel} / 1)`
|
|
: theme.palette.background.default,
|
|
overflow: "auto",
|
|
...customStyles,
|
|
mt: { xs: 8, md: 0 },
|
|
padding: 0,
|
|
})}
|
|
>
|
|
<Stack
|
|
spacing={2}
|
|
sx={{
|
|
display: "flex",
|
|
flex: 1,
|
|
justifyItems: "center",
|
|
alignItems: "center",
|
|
mx: 3,
|
|
pb: 5,
|
|
mt: { xs: 3, md: 0 },
|
|
}}
|
|
>
|
|
<Header />
|
|
<Outlet />
|
|
</Stack>
|
|
</Box>
|
|
</Box>
|
|
</AppTheme>
|
|
);
|
|
};
|
|
|
|
export default DashboardLayout;
|