components.view.drawer.PermanentViewDrawer.js Maven / Gradle / Ivy

Go to download
import Box                     from '@mui/material/Box';
import MuiDrawer               from '@mui/material/Drawer';
import { styled }              from '@mui/material/styles';
import ViewLinks             from 'components/view/drawer/DrawerLinks';
import DrawerSwitcherContainer from 'components/view/drawer/DrawerSwitcherContainer';
import { useLocalState }       from 'hooks/state';

const drawerWidth = 240;

const PermanentViewDrawer = ({children, sx, links}) => {
  const [open, setOpen] = useLocalState('VIEW_LINK_DRAWER', true)

  return (
    
      
        {children}
      
      
        
        
          
        
      
    
  );
}

const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })(
  ({ theme, open }) => ({
    width: drawerWidth,
    flexShrink: 0,
    whiteSpace: 'nowrap',
    boxSizing: 'border-box',
    ...(open && {
      ...openedMixin(theme),
      '& .MuiDrawer-paper': openedMixin(theme),
    }),
    ...(!open && {
      ...closedMixin(theme),
      '& .MuiDrawer-paper': closedMixin(theme),
    }),
  }),
);

const openedMixin = (theme) => ({
  width: drawerWidth,
  transition: theme.transitions.create('width', {
    easing: theme.transitions.easing.sharp,
    duration: theme.transitions.duration.enteringScreen,
  }),
  overflowX: 'hidden',
});

const closedMixin = (theme) => ({
  transition: theme.transitions.create('width', {
    easing: theme.transitions.easing.sharp,
    duration: theme.transitions.duration.leavingScreen,
  }),
  overflowX: 'hidden',
  width: `calc(${theme.spacing(7)} + 1px)`,
  [theme.breakpoints.up('sm')]: {
    width: `calc(${theme.spacing(8)} + 1px)`,
  },
});



export default PermanentViewDrawer