좌측메뉴 펼치기/접기 기능 넣기

외부 리소스

https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css

https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.min.js

html

<nav>
    <a class="nav-link collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#collapseLayouts"
       aria-expanded="false" aria-controls="collapseLayouts">
      <div class="nav-link-icon"><i class="fas fa-columns"></i></div>
      Layouts
      <div class="sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
    </a>

    <div class="collapse" id="collapseLayouts" aria-labelledby="headingOne"
         data-bs-parent="#sidenavAccordion">
      <nav class="sidenav-menu-nested nav">
        <a class="nav-link" href="#">Static Navigation</a>
        <a class="nav-link" href="#">Light Sidenav</a>
      </nav>
    </div>
  </nav>

css

nav {
  width: 200px;
  background-color: white;
}
nav .nav-link {
  display: flex;
}

nav .nav-link > .nav-link-icon {
  margin-right: 10px;
}

nav .nav-link > .sidenav-collapse-arrow {
  margin-left: auto;
}

nav > a.collapsed .sidenav-collapse-arrow > i {
    transform: rotate(180deg);
    transition: .3s ease-in-out;
}

nav .sidenav-menu-nested {
  padding-left: 20px;
  display: flex;
  flex-direction: column;
}

See the Pen 좌측메뉴 펼치기/접기 기능 by younghyeong ryu (@wangta69) on CodePen.