HamburguerReact

hamburguer.css

#menu {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
}
#lista {
  display: flex;
  align-items: center;
  justify-content: space-around;
  list-style-type: none;
}
#lista li {
  font-size: 16px;
  padding: 8px;
  height: 100%;
  cursor: pointer;
  transition: all 0.375s ease-in;
}
#lista li:hover {
  background: #ff5566;
}
#button-icon, #logo {
  width: 48px;
  height: 48px;
  background: transparent;
  border: none;
}
#button-icon, #drawer, #overlay {
  display: none;
}
#button-icon img {
  width: 48px;
  height: 48px;
}
#overlay {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,0.6);
  transition: all 0.3s ease-out;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  #button-icon {
    display: block;
    cursor: pointer;
  }
  #lista {
    display: none;
  }
  #drawer {
    display: block;
    width: 200px;
    height: 100vh;
    background: white;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0;
    right: -200px;
    transition: all 0.5s ease-in;
    z-index: 10;
  }
}

menu.jsx

import React from "react";
import './hamburguer.css';
const elementosDeMenu = [
  'Item 1',
  'Item 2',
  'Item 3',
  'Item 4',
  'Item 5'
];
class Menu extends React.Component {
  state = {
    isDrawerActive: false
  }
  toggleDrawer = () => {
    const {isDrawerActive} = this.state;
    this.setState({
      isDrawerActive: !isDrawerActive
    });
  }
  render() {
    const {isDrawerActive} = this.state;
    const drawerStyle = isDrawerActive ? { "right": 0} : null;
    return (
      <div id="menu">
        <img src="https://freedesignfile.com/upload/2017/08/rocket-icon-vector.png" id="logo" />
        <ul id="lista">
          {elementosDeMenu.map(pra => (<li>{pra}</li>))}
        </ul>
        <button id="button-icon" onClick={this.toggleDrawer}>
        <img src="https://img.icons8.com/pastel-glyph/2x/hamburger.png" />
        </button>
        {isDrawerActive ? <div id="overlay" onClick={this.toggleDrawer}/> : null}
        <div id="drawer" style={drawerStyle}>
           <ul id="lista-drawer">
            {elementosDeMenu.map(pra => (<li>{pra}</li>))}
          </ul>
         </div>
      </div>
    )
  }
}


function Prueba() {
  return (
    <Menu/>
  );
}

export default Prueba;