text: import * as React from 'react';
  import Box from '@mui/material/Box';
  import SwipeableDrawer from '@mui/material/SwipeableDrawer';
  import Button from '@mui/material/Button';
  import List from '@mui/material/List';
  import Divider from '@mui/material/Divider';
  import ListItem from '@mui/material/ListItem';
  import ListItemIcon from '@mui/material/ListItemIcon';
  import ListItemText from '@mui/material/ListItemText';
  import NewspaperIcon from '@mui/icons-material/Newspaper';
  
  export default function SwipeableTemporaryDrawer(props) {
    const [state, setState] = React.useState({
      left: false
    });
  
  
    const toggleDrawer = (anchor, open) => (event) => {
      if (
        event &&
        event.type === 'keydown' &&
        (event.key === 'Tab' || event.key === 'Shift')
      ) {
        return;
      }
  
      setState({ ...state, [anchor]: open });
    };
  
    const list = (anchor) => (
      <Box
        sx={{ width: anchor === 'top' || anchor === 'bottom' ? 'auto' : 250 }}
        role="presentation"
        onClick={toggleDrawer(anchor, false)}
        onKeyDown={toggleDrawer(anchor, false)}
      >
        <div className='label-news-categories'>Categories</div>  
        <Divider />  
        <List>
          {['Business','Entertainment','General','Health','Science','Sports','Technology'].map((text, index) => (
            <ListItem onClick={() => props.setNewsCategory(text)} button key={text}>
              <ListItemIcon>
                <NewspaperIcon />
              </ListItemIcon>
              <ListItemText primary={text} />
            </ListItem>
          ))}
        </List>
      </Box>
    );
  
    return (
      <div>
        {['left'].map((anchor) => (
          <React.Fragment key={anchor}>
            <Button onClick={toggleDrawer(anchor, true)}><i class="material-icons button-drawer-menu-icon">menu</i></Button>
            <SwipeableDrawer
              anchor={anchor}
              open={state[anchor]}
              onClose={toggleDrawer(anchor, false)}
              onOpen={toggleDrawer(anchor, true)}
            >
              {list(anchor)}
            </SwipeableDrawer>
          </React.Fragment>
        ))}
      </div>
    );
  }