尝试将汉堡菜单图标固定在左侧，并且在打开汉堡菜单时保持不动

<div class="hamburger-menu">
  <div class="hamburger-icon"></div>
  <nav class="menu-container">
    <ul>
      <li><a href="#">菜单项1</a></li>
      <li><a href="#">菜单项2</a></li>
      <li><a href="#">菜单项3</a></li>
    </ul>
  </nav>
</div>

.hamburger-menu {
  position: fixed;
  top: 20px;
  left: 20px;
}

.hamburger-icon {
  width: 30px;
  height: 3px;
  background-color: #000;
  margin-bottom: 5px;
}

.menu-container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 100vh;
  background-color: #fff;
  transform: translateX(-200px);
  transition: transform 0.3s ease-in-out;
}

.menu-container.open {
  transform: translateX(0);
}

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

.menu-container li {
  margin-bottom: 10px;
}

.menu-container a {
  text-decoration: none;
  color: #000;
}

const hamburgerMenu = document.querySelector('.hamburger-menu');
const menuContainer = document.querySelector('.menu-container');

hamburgerMenu.addEventListener('click', function() {
  menuContainer.classList.toggle('open');
});