如何使用带有左侧导航栏的topnav

<div class="container">
  <div class="left-nav">
    <!-- 左侧导航栏内容 -->
  </div>
  <nav class="topnav">
    <!-- topnav内容，包括logo、搜索框和其他导航链接 -->
  </nav>
  <div class="content">
    <!-- 网页主要内容 -->
  </div>
</div>

.container {
  display: flex;
}

.left-nav {
  width: 200px;
  background-color: #f1f1f1;
}

.topnav {
  background-color: #333;
  color: #fff;
  padding: 10px;
}

.content {
  flex-grow: 1;
  padding: 10px;
}

// 获取左侧导航栏链接和内容元素
var navLinks = document.querySelectorAll('.left-nav a');
var contentElements = document.querySelectorAll('.content > div');

// 遍历左侧导航栏链接
navLinks.forEach(function(link, index) {
  // 添加点击事件监听器
  link.addEventListener('click', function() {
    // 隐藏所有内容元素
    contentElements.forEach(function(element) {
      element.style.display = 'none';
    });
    // 显示对应的内容元素
    contentElements[index].style.display = 'block';
  });
});