Untitled

import PropTypes from 'prop-types';

// material-ui
import { useTheme } from '@mui/material/styles';
import { ButtonBase, Box, Drawer, useMediaQuery } from '@mui/material';

// third-party
import PerfectScrollbar from 'react-perfect-scrollbar';
import { BrowserView, MobileView } from 'react-device-detect';

// project imports
import MenuList from './MenuList';
import MenuListIcon from './MenuList/listIcon';
import { drawerWidth, appDrawerWidth } from 'store/constant';

// assets
import { IconMenu2 } from '@tabler/icons';
import { MenuOpen } from '@mui/icons-material';

import logo from 'assets/images/logo.png';
import logoOnly from 'assets/images/logo-only.png';
import Cookies from 'js-cookie';

// ==============================|| SIDEBAR DRAWER ||============================== //
export const Sidebar = ({ drawerOpen, drawerToggle, window, isOpen, handleLeftDrawerToggle }) => {
  const theme = useTheme();
  const matchUpMd = useMediaQuery(theme.breakpoints.up('md'));
  const matchDownMd = useMediaQuery(theme.breakpoints.down('md'));

  const drawerContent = (
    <>
      <BrowserView>
        {isOpen ? (
          <PerfectScrollbar
            component="div"
            style={{
              height: 'calc(90vh - 40px)',
              paddingLeft: '8px',
              paddingRight: '8px'
            }}
          >
            <MenuList />
          </PerfectScrollbar>
        ) : (
          <PerfectScrollbar
            component="div"
            style={{
              height: 'calc(90vh - 40px)',
              paddingLeft: '8px',
              paddingRight: '8px'
            }}
          >
            <MenuListIcon />
          </PerfectScrollbar>
        )}
      </BrowserView>
      <MobileView>
        <Box sx={{ px: 2 }}>
          <MenuList />
        </Box>
      </MobileView>
    </>
  );

  const container = window !== undefined ? () => window.document.body : undefined;

  return (
    <>
      <Box
        component="nav"
        sx={{
          flexShrink: { md: 0 },
          width: isOpen ? drawerWidth : matchDownMd ? 80 : 'auto',
          marginRight: isOpen ? 0 : matchDownMd ? 0 : '100px'
        }}
        aria-label="mailbox folders"
      >
        <Drawer
          container={container}
          variant={matchUpMd ? 'persistent' : 'permanent'}
          anchor="left"
          open={drawerOpen}
          onClose={drawerToggle}
          sx={{
            '& .MuiDrawer-paper': {
              width: isOpen ? drawerWidth : matchDownMd ? 80 : 'auto',
              background: 'linear-gradient(180deg, #F82C17 68%, #AD1100 100%)',
              color: '#fff',
              borderRight: 'left'
            }
          }}
          ModalProps={{ keepMounted: true }}
          color="#ffffff"
        >
          <Box
            sx={{
              display: 'flex',
              justifyContent: isOpen ? 'space-between' : 'center',
              alignItems: 'center',
              padding: '13px 13px 13px 16px',
              backgroundColor: '#ffffff',
              color: '#F82C17'
            }}
          >
            {isOpen ? (
              <Box component="span" sx={{ display: { xs: 'none', md: 'block' } }}>
                <img src={logo} alt="" style={{ height: '27px' }} />
              </Box>
            ) : (
              <Box component="span" sx={{ marginRight: '8px', display: { xs: 'none', md: 'block' } }}>
                <img src={logoOnly} alt="" style={{ height: '27px' }} />
              </Box>
            )}
            {isOpen ? (
              <ButtonBase sx={{ borderRadius: '12px', overflow: 'hidden', display: 'block' }} onClick={handleLeftDrawerToggle}>
                <MenuOpen stroke={1.5} size="1rem" />
              </ButtonBase>
            ) : (
              <ButtonBase sx={{ borderRadius: '12px', overflow: 'hidden', display: 'block' }} onClick={handleLeftDrawerToggle}>
                <IconMenu2 stroke={1.5} size="1rem" />
              </ButtonBase>
            )}
          </Box>
          {drawerContent}
        </Drawer>
      </Box>
    </>
  );
};

Sidebar.propTypes = {
  drawerOpen: PropTypes.bool,
  drawerToggle: PropTypes.func,
  window: PropTypes.object,
  isOpen: PropTypes.bool,
  handleLeftDrawerToggle: PropTypes.func
};