我實際上是在創(chuàng)建一個基于Vue.js(v2)和bootstrap-vue的網(wǎng)站。我想做一個隱藏在側(cè)邊欄的響應(yīng)菜單。問題是我如何從菜單列表中制作側(cè)邊欄？ 什么，如果有的話，可以返工，有一個像圖片中的效果？ 我做錯了什么？ 我將非常感謝任何建議/回答 這是我的第一個帖子，所以請理解:) 列表菜單 , 這樣的效果

<template>
  <aside class="left-menu p-3">
    <ul class="left-menu__list">
      <li class="left-menu__list__link"><a href="#">Article 1</a></li>
      <li class="left-menu__list__link"><a href="#">Article 2</a></li>
      <li class="left-menu__list__link"><a href="#">Article 3</a></li>
      <li class="left-menu__list__link"><a href="#">Article 4</a></li>
      <li class="left-menu__list__link"><a href="#">Article 5</a></li>
    </ul>
  </aside>
</template>

<script>
export default {};
</script>

<style lang="scss">
.left-menu {
  width: 20%;
  display: flex;
  justify-content: center;
}
.left-menu__list {
  width: 100%;
  list-style-type: none;
  letter-spacing: 1px;
}
.left-menu__list__link {
  padding: 5px 0;
}
.left-menu__list__link a {
  text-decoration: none;
  color: #b3bcc3;
  &:hover {
    color: #fff;
  }
}
</style>

我目前正在看教程，它們都只涉及下拉式導(dǎo)航欄。