55 lines
1.3 KiB
TypeScript
55 lines
1.3 KiB
TypeScript
import React, { useState } from "react";
|
|
import { styled } from "@mui/material/styles";
|
|
import AppRoutes from "./AppRoutes";
|
|
import TopBar from "./TopBar";
|
|
import Sidebar from "./SideBar";
|
|
|
|
import { drawerWidth } from "./constants";
|
|
import { Box } from "@mui/material";
|
|
|
|
const DrawerHeader = styled("div")(({ theme }) => ({
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "flex-end",
|
|
padding: theme.spacing(0, 1),
|
|
// necessary for content to be below app bar
|
|
...theme.mixins.toolbar
|
|
}));
|
|
|
|
const AppLayout: React.FC = () => {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
const handleDrawerOpen = () => {
|
|
setOpen(true);
|
|
};
|
|
|
|
const handleDrawerClose = () => {
|
|
setOpen(false);
|
|
};
|
|
|
|
return (
|
|
<Box sx={{ display: "flex", minHeight: "100vh" }}>
|
|
<TopBar open={open} onDrawerOpen={handleDrawerOpen} />
|
|
<Sidebar open={open} onDrawerOpen={handleDrawerOpen} onDrawerClose={handleDrawerClose} />
|
|
<Box
|
|
component="main"
|
|
sx={{
|
|
flexGrow: 1,
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
paddingTop: 2,
|
|
paddingBottom: 1,
|
|
paddingLeft: 1,
|
|
paddingRight: 1,
|
|
width: `calc(100% - ${drawerWidth}px)`
|
|
}}
|
|
>
|
|
<DrawerHeader />
|
|
<AppRoutes />
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default AppLayout;
|