83 lines
1.8 KiB
TypeScript
83 lines
1.8 KiB
TypeScript
import * as React from "react";
|
|
import { Box, Stack } from "@mui/material";
|
|
import { Outlet } from "react-router-dom";
|
|
import SideMenu from "../../components/SideMenu/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%",
|
|
height: "100vh", // Full height from root, not auto
|
|
overflow: "hidden",
|
|
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.palette.background.default,
|
|
overflow: "auto",
|
|
overflowX: "hidden",
|
|
...customStyles,
|
|
mt: { xs: 8, md: 0 },
|
|
padding: 0,
|
|
})}
|
|
>
|
|
<Box sx={{ height: "84px", flex: "0 0 84px" }}>
|
|
<Header />
|
|
</Box>
|
|
<Stack
|
|
spacing={2}
|
|
sx={{
|
|
padding: "30px",
|
|
display: "flex",
|
|
flex: 1,
|
|
justifyItems: "center",
|
|
alignItems: "center",
|
|
// mx: { xs: 1, sm: 3 },
|
|
// pb: 5,
|
|
mt: { xs: 3, md: 0 },
|
|
width: "100%",
|
|
boxSizing: "border-box",
|
|
}}
|
|
>
|
|
<Outlet />
|
|
</Stack>
|
|
</Box>
|
|
</Box>
|
|
</AppTheme>
|
|
);
|
|
};
|
|
|
|
export default DashboardLayout;
|