Html 在手机上制作可折叠的边栏

我有一行两列。左列有一个侧边栏，堆叠在iPad宽度上下的右列顶部。我希望它是可折叠的，显示活动链接作为标题和下拉菜单显示菜单时点击

我已经尝试了一些方法来实现这一点，但我无法让它发挥作用

以下是HTML：

<div class="col-lg-3 customer-portal-base">
      <ul class="side-bar">
          <li class="side-bar__item">
              <a href="#" class="side-bar__item-link">Account</a>
          </li>
          <li class="side-bar__item">
              <a href="#" class="side-bar__item-link">Orders</a>
          </li>
          <li class="side-bar__item">
            <a href="#" class="side-bar__item-link">Order details</a>
        </li>
          <li class="side-bar__item">
              <a href="#" class="side-bar__item-link">My details</a>
          </li>
          <li class="side-bar__item side-bar__item--is-active">
              <a href="#" class="side-bar__item-link side-bar__item-link--is-active">Account settings</a>
          </li>
          <li class="side-bar__item">
              <a href="#" class="side-bar__item-link">Contact</a>
          </li>
          <li class="side-bar__item">
              <a href="#" class="side-bar__item-link">Logout</a>
          </li>
      </ul>
  </div>

---

也许是这样的

---

这是一个定制的引导菜单

也许是这样的

这是一个定制的引导菜单

.side-bar {
  padding: 0;
  background-color: white;
  list-style: none;
  margin-top: 0;
  width: 97%;

  &__item {
    &-link {
      font-weight: lighter;
      transition: all 0.5s;

      &--is-active {
        color: blue;
        font-weight: 600;

        &::after {
          background-image: url("");
          content: "";
          display: inline-block;
          background-repeat: no-repeat;
          background-position: center center;
          width: 1.8rem;
          height: 1rem;
          margin-left: 3rem;
          transform: translateY(0.2rem);

          @include sidebar-breakpoint {
            display: none;
          }
        }
      }

      &:hover, &:active {
        color: blue;
      }
    }
    cursor: pointer;
    padding: 1.1rem 0 1.1rem 1.5rem;
    border-bottom: solid 1px grey;
    font-size: 0.9rem;

    &:last-child {
      border-bottom: 0;
    }
  }
}