text: import React from 'react'
  import clsx from 'clsx'
  import { makeStyles } from '@material-ui/core/styles'
  import SwipeableDrawer from '@material-ui/core/SwipeableDrawer'
  import Button from '@material-ui/core/Button'
  import SideNav from './SideNav'
  import ListIcon from '@material-ui/icons/List'
  
  const useStyles = makeStyles({
    list: {
      width: 300,
      padding: '10px',
    },
    fullList: {
      width: 'auto',
    },
  })
  
  export default function SideNavToggle() {
    const classes = useStyles()
    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) => (
      <div
        className={clsx(classes.list, {
          [classes.fullList]: anchor === 'top' || anchor === 'bottom',
        })}
        role="presentation"
        onKeyDown={toggleDrawer(anchor, false)}
      >
        <SideNav />
      </div>
    )
  
    return (
      <div>
        {['left'].map((anchor) => (
          <React.Fragment key={anchor}>
            <Button onClick={toggleDrawer(anchor, true)}>
              <ListIcon /> More Filter Option
            </Button>
            <SwipeableDrawer
              anchor={anchor}
              open={state[anchor]}
              onClose={toggleDrawer(anchor, false)}
              onOpen={toggleDrawer(anchor, true)}
            >
              {list(anchor)}
            </SwipeableDrawer>
          </React.Fragment>
        ))}
      </div>
    )
  }
  