如何创建像邮件一样有侧数的列表视图

<div class="container">
  <div class="sidebar">
    <!-- 侧边栏内容 -->
  </div>
  <div class="list-view">
    <!-- 列表视图内容 -->
  </div>
</div>

.container {
  display: flex;
}

.sidebar {
  width: 200px;
  background-color: #f2f2f2;
}

.list-view {
  flex: 1;
  background-color: #ffffff;
}

<div class="container">
  <div class="sidebar">
    <ul>
      <li>Inbox</li>
      <li>Sent</li>
      <li>Drafts</li>
      <!-- 其他邮件文件夹或标签 -->
    </ul>
  </div>
  <div class="list-view">
    <ul>
      <li>邮件标题1</li>
      <li>邮件标题2</li>
      <li>邮件标题3</li>
      <!-- 其他邮件标题 -->
    </ul>
  </div>
</div>

const sidebarItems = document.querySelectorAll('.sidebar li');
const listViewItems = document.querySelectorAll('.list-view li');

sidebarItems.forEach((item, index) => {
  item.addEventListener('click', () => {
    // 移除所有列表项的选中状态
    listViewItems.forEach((listItem) => {
      listItem.classList.remove('selected');
    });
    // 添加选中状态到当前点击的列表项
    listViewItems[index].classList.add('selected');
  });
});