单击底部菜单时如何打开侧边导航抽屉？

<div class="bottom-menu">
  <div class="menu-item" onclick="openDrawer()">菜单项1</div>
  <div class="menu-item" onclick="openDrawer()">菜单项2</div>
  <div class="menu-item" onclick="openDrawer()">菜单项3</div>
</div>

<div class="drawer">
  <!-- 侧边导航抽屉内容 -->
</div>

.bottom-menu {
  display: flex;
  justify-content: space-around;
  background-color: #f0f0f0;
  padding: 10px;
}

.menu-item {
  cursor: pointer;
}

.drawer {
  position: fixed;
  top: 0;
  left: -300px; /* 初始隐藏抽屉 */
  width: 300px;
  height: 100%;
  background-color: #fff;
  transition: left 0.3s ease; /* 添加过渡效果 */
}

function openDrawer() {
  var drawer = document.querySelector('.drawer');
  drawer.style.left = '0'; // 显示抽屉
}