如何设置汉堡导航栏的动态高度

<div class="navbar">
  <div class="hamburger"></div>
  <ul class="menu">
    <li><a href="#">菜单项1</a></li>
    <li><a href="#">菜单项2</a></li>
    <li><a href="#">菜单项3</a></li>
    <li><a href="#">菜单项4</a></li>
  </ul>
</div>

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #f1f1f1;
  padding: 10px;
  z-index: 9999;
}

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

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

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

.menu li a {
  text-decoration: none;
  color: #333;
}

const hamburger = document.querySelector('.hamburger');
const menu = document.querySelector('.menu');

hamburger.addEventListener('click', function() {
  menu.classList.toggle('show');
});

window.addEventListener('resize', function() {
  if (window.innerWidth > 768) {
    menu.classList.remove('show');
  }
});