text: import PropTypes from 'prop-types';
  import { makeStyles } from '@material-ui/core/styles';
  import { Drawer, List, Divider, ListItem, ListItemIcon, ListItemText } from '@material-ui/core';
  import { MoveToInbox, Mail } from '@material-ui/icons';
  
  const useStyles = makeStyles({
    list: {
      width: 250,
    },
  });
  
  const Sidebar = ({ isOpen, toggleSidebar }) => {
    const classes = useStyles();
  
    return (
      <Drawer anchor='left' open={isOpen} onClose={toggleSidebar}>
        <div className={classes.list} role='presentation' onClick={toggleSidebar} onKeyDown={toggleSidebar}>
          <List>
            {['Inbox', 'Starred'].map((text, index) => (
              <ListItem button key={text}>
                <ListItemIcon>{index % 2 === 0 ? <MoveToInbox /> : <Mail />}</ListItemIcon>
                <ListItemText primary={text} />
              </ListItem>
            ))}
          </List>
          <Divider />
          <List>
            {['All mail'].map((text, index) => (
              <ListItem button key={text}>
                <ListItemIcon>{index % 2 === 0 ? <MoveToInbox /> : <Mail />}</ListItemIcon>
                <ListItemText primary={text} />
              </ListItem>
            ))}
          </List>
        </div>
      </Drawer>
    );
  };
  
  Sidebar.propTypes = {
    isOpen: PropTypes.bool.isRequired,
    toggleSidebar: PropTypes.func.isRequired,
  };
  
  export default Sidebar;
  