52 lines
1.4 KiB
JavaScript
52 lines
1.4 KiB
JavaScript
// material-ui
|
|
import { styled } from '@mui/material/styles';
|
|
import Drawer from '@mui/material/Drawer';
|
|
|
|
// project import
|
|
import { DRAWER_WIDTH, ThemeMode } from 'config';
|
|
|
|
const openedMixin = (theme) => ({
|
|
width: DRAWER_WIDTH,
|
|
// borderRight: `1px solid ${theme.palette.divider}`,
|
|
borderRight: 'none',
|
|
transition: theme.transitions.create('width', {
|
|
easing: theme.transitions.easing.sharp,
|
|
duration: theme.transitions.duration.enteringScreen
|
|
}),
|
|
overflowX: 'hidden',
|
|
boxShadow: theme.palette.mode === ThemeMode.DARK ? theme.customShadows.z1 : 'none',
|
|
backgroundColor:'#662582',
|
|
});
|
|
|
|
const closedMixin = (theme) => ({
|
|
transition: theme.transitions.create('width', {
|
|
easing: theme.transitions.easing.sharp,
|
|
duration: theme.transitions.duration.leavingScreen
|
|
}),
|
|
// overflowX: 'hidden',
|
|
width: theme.spacing(7.5),
|
|
borderRight: 'none',
|
|
boxShadow: theme.customShadows.z1,
|
|
backgroundColor:'#662582',
|
|
});
|
|
|
|
// ==============================|| DRAWER - MINI STYLED ||============================== //
|
|
|
|
const MiniDrawerStyled = styled(Drawer, { shouldForwardProp: (prop) => prop !== 'open' })(({ theme, open }) => ({
|
|
width: DRAWER_WIDTH,
|
|
flexShrink: 0,
|
|
whiteSpace: 'nowrap',
|
|
boxSizing: 'border-box',
|
|
|
|
...(open && {
|
|
...openedMixin(theme),
|
|
'& .MuiDrawer-paper': openedMixin(theme)
|
|
}),
|
|
...(!open && {
|
|
...closedMixin(theme),
|
|
'& .MuiDrawer-paper': closedMixin(theme)
|
|
})
|
|
}));
|
|
|
|
export default MiniDrawerStyled;
|