如何制作响应式汉堡包菜单？

<nav class="navbar">
  <div class="menu-btn">
    <div class="btn-line"></div>
    <div class="btn-line"></div>
    <div class="btn-line"></div>
  </div>
  <ul class="menu">
    <li class="menu-item"><a href="#">菜单项1</a></li>
    <li class="menu-item"><a href="#">菜单项2</a></li>
    <li class="menu-item"><a href="#">菜单项3</a></li>
  </ul>
</nav>

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.menu-btn {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.btn-line {
  width: 30px;
  height: 3px;
  background: #000;
  margin-bottom: 5px;
}

.menu {
  display: none;
  list-style: none;
}

.menu-item {
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  .menu-btn {
    display: block;
  }
  
  .menu {
    display: flex;
    flex-direction: column;
  }
}

const menuBtn = document.querySelector('.menu-btn');
const menu = document.querySelector('.menu');

let menuOpen = false;
menuBtn.addEventListener('click', () => {
  if (!menuOpen) {
    menuBtn.classList.add('open');
    menu.style.display = 'flex';
    menuOpen = true;
  } else {
    menuBtn.classList.remove('open');
    menu.style.display = 'none';
    menuOpen = false;
  }
});