116 lines
4.0 KiB
JavaScript
116 lines
4.0 KiB
JavaScript
"use client";
|
|
import SidebarMenu from "@/core/components/SidebarMenu";
|
|
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
|
|
import MenuIcon from "@mui/icons-material/Menu";
|
|
import { Box, Drawer, IconButton, Paper, Stack, styled, Toolbar } from "@mui/material";
|
|
import MuiAppBar from "@mui/material/AppBar";
|
|
import { useState } from "react";
|
|
import HeaderMenu from "./HeaderMenu";
|
|
|
|
const drawerWidth = 300;
|
|
|
|
const Main = styled(Stack, { shouldForwardProp: (prop) => prop !== "open" })(({ theme, open }) => ({
|
|
flexGrow: 1,
|
|
height: '100%',
|
|
transition: theme.transitions.create("margin", {
|
|
easing: theme.transitions.easing.sharp,
|
|
duration: theme.transitions.duration.leavingScreen,
|
|
}),
|
|
marginLeft: `-${drawerWidth}px`,
|
|
...(open && {
|
|
transition: theme.transitions.create("margin", {
|
|
easing: theme.transitions.easing.easeOut,
|
|
duration: theme.transitions.duration.enteringScreen,
|
|
}),
|
|
marginLeft: 0,
|
|
}),
|
|
}));
|
|
|
|
const AppBar = styled(MuiAppBar, {
|
|
shouldForwardProp: (prop) => prop !== "open",
|
|
})(({ theme, open }) => ({
|
|
transition: theme.transitions.create(["margin", "width"], {
|
|
easing: theme.transitions.easing.sharp,
|
|
duration: theme.transitions.duration.leavingScreen,
|
|
}),
|
|
...(open && {
|
|
width: `calc(100% - ${drawerWidth}px)`,
|
|
marginLeft: `${drawerWidth}px`,
|
|
transition: theme.transitions.create(["margin", "width"], {
|
|
easing: theme.transitions.easing.easeOut,
|
|
duration: theme.transitions.duration.enteringScreen,
|
|
}),
|
|
}),
|
|
}));
|
|
|
|
const DrawerHeader = styled("div")(({ theme }) => ({
|
|
display: "flex",
|
|
alignItems: "center",
|
|
padding: theme.spacing(0, 1),
|
|
...theme.mixins.toolbar,
|
|
minHeight: '48px !important',
|
|
justifyContent: "flex-end",
|
|
}));
|
|
|
|
const HeaderWithSidebar = ({ children }) => {
|
|
const [open, setOpen] = useState(true);
|
|
|
|
const handleDrawerOpen = () => {
|
|
setOpen(true);
|
|
};
|
|
const handleDrawerClose = () => {
|
|
setOpen(false);
|
|
};
|
|
return (
|
|
<Box sx={{ display: "flex", height: 'calc(100% - 163px)', width: '100%', mt: '163px' }}>
|
|
<AppBar sx={{ position: "fixed", top: "unset" }} elevation={0} open={open}>
|
|
<Toolbar variant="dense">
|
|
<IconButton
|
|
color="inherit"
|
|
aria-label="open drawer"
|
|
onClick={handleDrawerOpen}
|
|
edge="start"
|
|
sx={{ mr: 2, ...(open && { display: "none" }) }}
|
|
>
|
|
<MenuIcon />
|
|
</IconButton>
|
|
<Box sx={{ flexGrow: 1, display: { xs: "none", md: "flex" } }}>
|
|
<HeaderMenu />
|
|
</Box>
|
|
</Toolbar>
|
|
</AppBar>
|
|
<Drawer
|
|
sx={{
|
|
height: '100%',
|
|
width: drawerWidth,
|
|
flexShrink: 0,
|
|
"& .MuiDrawer-paper": {
|
|
width: drawerWidth,
|
|
boxSizing: "border-box",
|
|
borderTop: 1,
|
|
borderTopColor: "divider",
|
|
top: "unset",
|
|
},
|
|
}}
|
|
variant="persistent"
|
|
anchor="left"
|
|
open={open}
|
|
>
|
|
<DrawerHeader>
|
|
<IconButton onClick={handleDrawerClose}>
|
|
<ChevronRightIcon />
|
|
</IconButton>
|
|
</DrawerHeader>
|
|
<SidebarMenu />
|
|
</Drawer>
|
|
<Main open={open} sx={{ height: '100%', width: '100%', overflow: 'hidden' }}>
|
|
<DrawerHeader />
|
|
<Box sx={{ height: '100%', width: '100%', overflowY: 'scroll', overflowX: 'hidden', }}>
|
|
{children}
|
|
</Box>
|
|
</Main>
|
|
</Box>
|
|
);
|
|
};
|
|
export default HeaderWithSidebar;
|