94 lines
3.3 KiB
JavaScript
94 lines
3.3 KiB
JavaScript
'use client'
|
|
import {useState} from "react";
|
|
import {Box, Drawer, IconButton, Paper, styled, Toolbar, Typography} from "@mui/material";
|
|
import MuiAppBar from '@mui/material/AppBar';
|
|
import MenuIcon from '@mui/icons-material/Menu';
|
|
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
|
|
import SidebarMenu from "@/core/components/SidebarMenu";
|
|
|
|
const drawerWidth = 260;
|
|
|
|
const Main = styled(Paper, {shouldForwardProp: (prop) => prop !== 'open'})(({theme, open}) => ({
|
|
flexGrow: 1, 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), // necessary for content to be below app bar
|
|
...theme.mixins.toolbar, justifyContent: 'flex-end',
|
|
}));
|
|
|
|
const HeaderWithSidebar = ({children}) => {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
const handleDrawerOpen = () => {
|
|
setOpen(true);
|
|
};
|
|
|
|
const handleDrawerClose = () => {
|
|
setOpen(false);
|
|
};
|
|
return (<Box sx={{display: 'flex'}}>
|
|
<AppBar sx={{position: 'fixed', top: "unset"}} elevation={0} open={open}>
|
|
<Toolbar>
|
|
<IconButton
|
|
color="inherit"
|
|
aria-label="open drawer"
|
|
onClick={handleDrawerOpen}
|
|
edge="start"
|
|
sx={{mr: 2, ...(open && {display: 'none'})}}
|
|
>
|
|
<MenuIcon/>
|
|
</IconButton>
|
|
<Typography variant="h6" noWrap component="div">
|
|
menu
|
|
</Typography>
|
|
</Toolbar>
|
|
</AppBar>
|
|
<Drawer
|
|
sx={{
|
|
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 elevation={0} open={open}>
|
|
<DrawerHeader/>
|
|
{children}
|
|
</Main>
|
|
</Box>)
|
|
}
|
|
export default HeaderWithSidebar |