// ** React Imports import { Fragment, useEffect } from 'react' // ** MUI Imports import Backdrop from '@mui/material/Backdrop' import Box, { BoxProps } from '@mui/material/Box' // ** Types import { SidebarType } from './type' const Sidebar = (props: BoxProps & SidebarType) => { // ** Props const { sx, show, direction, children, hideBackdrop, onOpen, onClose, backDropClick } = props const handleBackdropClick = () => { if (backDropClick) { backDropClick() } } useEffect(() => { if (show && onOpen) { onOpen() } if (show === false && onClose) { onClose() } }, [onClose, onOpen, show]) return ( <Fragment> <Box sx={{ top: 0, height: '100%', zIndex: 'drawer', position: 'absolute', transition: 'all 0.25s ease-in-out', backgroundColor: 'background.paper', ...(show ? { opacity: 1 } : { opacity: 0 }), ...(direction === 'right' ? { left: 'auto', right: show ? 0 : '-100%' } : { right: 'auto', left: show ? 0 : '-100%' }), ...sx }} > {children} </Box> {hideBackdrop ? null : ( <Backdrop open={show} transitionDuration={250} onClick={handleBackdropClick} sx={{ position: 'absolute', zIndex: theme => theme.zIndex.drawer - 1 }} /> )} </Fragment> ) } export default Sidebar Sidebar.defaultProps = { direction: 'left' }