Component <Menu /> and <MenuItem />

Props	Type	Meaning	Possible values
position	string	Change menu position around the elemet	top-left / top / top-right / right-top / right / right-bottom / bottom-left / bottom / bottom-right / left-top / left / left-bottom
isOpen	boolean	Set menu status	true / false

---

Positions

const MenuPos = ({ position }) => {
  const [isMenu, setMenu] = useState(false)

  return (
    <>
      <button type="button" onClick={event => setMenu(event.currentTarget)}>
        Open {position.replace('-', ' ')}
      </button>

      <Menu isOpen={isMenu} position={position} handleClose={() => setMenu(false)}>
        <MenuItem>Milk</MenuItem>
        <MenuItem disabled>Chokolate</MenuItem>
        <MenuItem>Vegetables</MenuItem>
      </Menu>
    </>
  )
}