Untitled
unknown
plain_text
a year ago
4.3 kB
9
Indexable
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 };
Editor is loading...
Leave a Comment