drawer-reactJs-LeftMenu-MaterialUI

import React, {useState} from 'react'
import {Button, Drawer, List, ListItemButton, ListItemText, Divider } from '@mui/material';
import Nabvar from './Nabvar'

const Container = () => {

  const[open, setOpen] = useState(false)

  const courses = [
    'react',
    'node',
    'js',
    'css',
  ]
  return(
    <div>
      <Button
        variant = 'contained'
        onClick={()=> setOpen(true)}
        >Open
      </Button>
      <Nabvar />
      <Drawer
        open={open}
        onClose={() => setOpen(false)}
        >
          <List>
            {
              courses.map(course => (
                <ListItemButton onClick={ ()=> setOpen(false)}>
                  <ListItemText primary={course} />
                </ListItemButton>
              ))
            }
              <Divider />
          </List>
      </Drawer>
    </div>
  )
}

export default Container