如何将导航选项菜单设置为标题文本上的图标按钮

<header>
  <h1 class="title">标题文本</h1>
  <button class="icon-button">
    <i class="icon"></i>
  </button>
  <nav class="menu">
    <!-- 导航选项菜单内容 -->
  </nav>
</header>

header {
  display: flex;
  align-items: center;
}

.title {
  margin-right: 10px;
}

.icon-button {
  background: none;
  border: none;
  cursor: pointer;
}

.icon {
  /* 添加图标样式，例如使用字体图标或SVG图标 */
}

.menu {
  display: none;
  /* 导航选项菜单的样式 */
}

const iconButton = document.querySelector('.icon-button');
const menu = document.querySelector('.menu');

iconButton.addEventListener('click', () => {
  menu.classList.toggle('show');
});