将CSS和HTML汉堡菜单转换为react组件

import React, { useState } from 'react';

const HamburgerMenu = () => {
  const [isOpen, setIsOpen] = useState(false);

  const toggleMenu = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div className="hamburger-menu">
      <div className={`hamburger ${isOpen ? 'open' : ''}`} onClick={toggleMenu}>
        <div className="line"></div>
        <div className="line"></div>
        <div className="line"></div>
      </div>
      {isOpen && (
        <ul className="menu">
          <li>菜单项1</li>
          <li>菜单项2</li>
          <li>菜单项3</li>
        </ul>
      )}
    </div>
  );
};

export default HamburgerMenu;

.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 20px;
  cursor: pointer;
}

.line {
  width: 100%;
  height: 2px;
  background-color: #000;
}

.open .line:first-child {
  transform: translateY(8px) rotate(45deg);
}

.open .line:nth-child(2) {
  opacity: 0;
}

.open .line:last-child {
  transform: translateY(-8px) rotate(-45deg);
}

.menu {
  list-style: none;
  padding: 0;
}

.menu li {
  padding: 10px;
}