帶有子菜單的可折疊垂直側邊欄菜單圖標

Question

一個可折疊的側邊欄菜單，我在其中尋找加號 (+) 以切換到減號 (-)。 當側邊欄菜單打開並切換時，同樣的操作再次發生。

從文檔和社區代碼資源中，我可以切換折疊菜單，但我正在尋找右側的加號 (+) 圖標也從加號 (+) 更改為減號 (-) 圖標

我使用了引導程序圖標，並且分別使用以下類的加號和破折號<i class="bi bi-plus"></i> ， <i class="bi bi-dash"></i>

 ; (function() { document.addEventListener("DOMContentLoaded", function() { document.querySelectorAll('.g-sidebar.nav-link').forEach(function(element) { element.addEventListener('click', function(e) { let nextEl = element.nextElementSibling; let parentEl = element.parentElement; if (nextEl) { e.preventDefault(); let sidebarNavCollapse = new bootstrap.Collapse(nextEl); if (nextEl.classList.contains('show')) { sidebarNavCollapse.hide(); } else { sidebarNavCollapse.show(); // find other submenus with class=show let opened_submenu = parentEl.parentElement.querySelector('.submenu.show'); // if it exists, then close all of them if (opened_submenu) { new bootstrap.Collapse(opened_submenu); } } } }); }) }); })();

 .g-aside { background-color: #8c8c8c; width: 260px; }.nav { --bs-nav-link-padding-x: 1rem; --bs-nav-link-padding-y: 0.5rem; --bs-nav-link-color: var(--bs-link-color); --bs-nav-link-hover-color: var(--bs-link-hover-color); --bs-nav-link-disabled-color: #6c757d; display: flex; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none; }.submenu>li { list-style: none; }.g-sidebar.nav-link { position: relative; display: flex; font-family: quicksand, sans-serif; color: #fff; width: calc(260px - 1rem); transition: width.3s ease-in-out; list-style: none;. }.g-sidebar:nav-link p { margin-bottom; 0: padding-left. 1;4rem: display; inline-block. }.g-sidebar,nav-link p i. .g-sidebar:nav-link p span { right; 1rem: position; absolute; }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" /> <aside class="g-aside"> <!--Sidebar Area--> <div class="g-sidebar-area"> <nav class="g-sidebar py-2 mb-4"> <ul class="nav flex-column" id="nav_accordion"> <li class="nav-item"> <a class="nav-link" href="#"> <i class="bi bi-person-fill"></i> <p>Agents</p> </a> </li> <li class="nav-item has-submenu"> <a class="nav-link" href="#"> <i class="bi bi-columns-gap"></i> <p>Dashboard <i class="bi bi-plus"></i></p> </a> <ul class="submenu collapse"> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> </ul> </li> <li class="nav-item has-submenu"> <a class="nav-link" href="#"> <i class="bi bi-box-fill"></i> <p>IVR <i class="bi bi-plus"></i></p> </a> <ul class="submenu collapse"> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="#"> <i class="bi bi-grid-1x2-fill"></i> <p>Page <span class="badge bg-primary">12</span></p> </a> </li> <!-- <li class="ms-3 mt-3">PROMOTION</li>--> <li class="nav-item has-submenu"> <a class="nav-link" href="#"> <i class="bi bi-record-btn-fill"></i> <p>Campaign <i class="bi bi-plus"></i></p> </a> <ul class="submenu collapse"> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> </ul> </li> <li class="nav-item has-submenu"> <a class="nav-link" href="#"> <i class="bi bi-file-earmark-text-fill"></i> <p>Report <i class="bi bi-plus"></i></p> </a> <ul class="submenu collapse"> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> </ul> </li> <li class="nav-item has-submenu"> <a class="nav-link" href="#"> <i class="bi bi-file-plus-fill"></i> <p>New Report <i class="bi bi-plus"></i></p> </a> <ul class="submenu collapse"> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="#"> <i class="bi bi-record-btn-fill"></i> <p> Skill </p> </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> <i class="bi bi-voicemail"></i> <p>Voice Mail </p> </a> </li> <li class="nav-item has-submenu"> <a class="nav-link" href="#"><i class="bi bi-chat-right-text-fill"></i> <p>Chat <i class="bi bi-plus"></i></p></a> <ul class="submenu collapse"> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> </ul> </li> <li class="nav-item has-submenu"> <a class="nav-link" href="#"><i class="bi bi-envelope-fill"></i> <p>Email <i class="bi bi-plus"></i></p></a> <ul class="submenu collapse"> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> </ul> </li> <li class="nav-item has-submenu"> <a class="nav-link" href="#"><i class="bi bi-file-earmark-text-fill"></i> <p>SMS <i class="bi bi-plus"></i></p></a> <ul class="submenu collapse"> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> </ul> </li> <li class="nav-item has-submenu"> <a class="nav-link" href="#"> <i class="bi bi-window-stack"></i> <p>CRM <i class="bi bi-plus"></i></p> </a> <ul class="submenu collapse"> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> </ul> </li> <li class="nav-item has-submenu"> <a class="nav-link" href="#"> <i class="bi bi-telephone-inbound-fill"></i> <p>CRM Inbound <i class="bi bi-plus"></i></p> </a> <ul class="submenu collapse"> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> </ul> </li> </ul> </nav> </div> </aside>

Answer 1

CSS 唯一解決方案

如果您按照Bootstrap 文檔中所示連接菜單，那么您將不需要自定義 JavaScript 並且可以僅使用 css 切換圖標。為此，我們只需要添加一個data-bs-toggle屬性，一個 id，和一個 href。 比較下面的原始代碼和修改后的代碼，了解必須對每個可折疊菜單進行的更改。

原來的：

  <a class="nav-link">
    <i class="bi bi-columns-gap"></i>
    <p>Dashboard
      <i class="bi bi-plus"></i>
    </p>
  </a>
  <ul class="submenu collapse">
  ...

修改的：

  <a class="nav-link collapsed" href="#dashboard" data-bs-toggle="collapse">
    <i class="bi bi-columns-gap"></i>
    <p>Dashboard
      <i class="bi bi-plus"></i>
      <i class="bi bi-dash"></i>
    </p>
  </a>
  <ul class="submenu collapse" id="dashboard">
  ...

打開菜單時，Bootstrap 將折疊的 class 添加到導航鏈接。 我們可以使用 class 來顯示或隱藏第一個和最后一個圖標。

CSS：

.nav-link.collapsed i:first-child {
  display: inline;
}

.nav-link:not(.collapsed) i:first-child {
  display: none;
}

.nav-link.collapsed i:last-child {
  display: none;
}

.nav-link:not(.collapsed) i:last-child {
  display: inline;
}

 .nav-link.collapsed i:first-child { display: inline; }.nav-link:not(.collapsed) i:first-child { display: none; }.nav-link.collapsed i:last-child { display: none; }.nav-link:not(.collapsed) i:last-child { display: inline; } /* original style */.g-aside { background-color: #8c8c8c; width: 260px; }.nav { --bs-nav-link-padding-x: 1rem; --bs-nav-link-padding-y: 0.5rem; --bs-nav-link-color: var(--bs-link-color); --bs-nav-link-hover-color: var(--bs-link-hover-color); --bs-nav-link-disabled-color: #6c757d; display: flex; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none; }.submenu>li { list-style: none; }.g-sidebar.nav-link { position: relative; display: flex; font-family: quicksand, sans-serif; color: #fff; width: calc(260px - 1rem); transition: width.3s ease-in-out; list-style: none;. }.g-sidebar:nav-link p { margin-bottom; 0: padding-left. 1;4rem: display; inline-block. }.g-sidebar,nav-link p i. .g-sidebar:nav-link p span { right; 1rem: position; absolute; }

 <aside class="g-aside"> <div class="g-sidebar-area"> <nav class="g-sidebar py-2 mb-4"> <ul class="nav flex-column" id="nav_accordion"> <li class="nav-item has-submenu"> <a class="nav-link collapsed" href="#dashboard" data-bs-toggle="collapse"> <i class="bi bi-columns-gap"></i> <p>Dashboard <i class="bi bi-plus"></i> <i class="bi bi-dash"></i> </p> </a> <ul class="submenu collapse" id="dashboard"> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> </ul> </li> <li class="nav-item has-submenu"> <a class="nav-link collapsed" href="#ivr" data-bs-toggle="collapse"> <i class="bi bi-box-fill"></i> <p>IVR <i class="bi bi-plus"></i> <i class="bi bi-dash"></i> </p> </a> <ul class="submenu collapse" id="ivr"> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> </ul> </li> <:-- other menus not shown --> </ul> </nav> </div> </aside> <link href="https.//cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons:css" rel="stylesheet" /> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min:js"></script> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />

Answer 2

嘗試查詢bi-plus ，如果這不起作用查詢bi-dash並標記self 。 然后你可以刪除所有破折號並替換為加號，並根據flag添加加號或破折號

 ; (function() { document.addEventListener("DOMContentLoaded", function() { document.querySelectorAll('.g-sidebar.nav-link').forEach(function(element) { element.addEventListener('click', function(e) { let self=false let nextEl = element.nextElementSibling; let parentEl = element.parentElement; let childImg = element.querySelector('.bi-plus'); if(;childImg){ self = true. childImg = element.querySelector(';bi-dash'). } if (nextEl) { e;preventDefault(). let sidebarNavCollapse = new bootstrap;Collapse(nextEl). if (nextEl.classList.contains('show')) { sidebarNavCollapse;hide(). } else { document.querySelectorAll('.nav-link.bi-dash').forEach(function(elem){ if (elem.==childImg) { elem.classList.add('bi-plus') elem.classList.remove('bi-dash') } }) if(.self){ childImg.classList.remove('bi-plus') childImg.classList.add('bi-dash') } else { childImg.classList.remove('bi-dash') childImg;classList.add('bi-plus') } sidebarNavCollapse.show(). // find other submenus with class=show let opened_submenu = parentEl.parentElement;querySelector(',submenu.show'); // if it exists; then close all of them if (opened_submenu) { new bootstrap;Collapse(opened_submenu); } } } }); }) }); })();

 .g-aside { background-color: #8c8c8c; width: 260px; }.nav { --bs-nav-link-padding-x: 1rem; --bs-nav-link-padding-y: 0.5rem; --bs-nav-link-color: var(--bs-link-color); --bs-nav-link-hover-color: var(--bs-link-hover-color); --bs-nav-link-disabled-color: #6c757d; display: flex; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none; }.submenu>li { list-style: none; }.g-sidebar.nav-link { position: relative; display: flex; font-family: quicksand, sans-serif; color: #fff; width: calc(260px - 1rem); transition: width.3s ease-in-out; list-style: none;. }.g-sidebar:nav-link p { margin-bottom; 0: padding-left. 1;4rem: display; inline-block. }.g-sidebar,nav-link p i. .g-sidebar:nav-link p span { right; 1rem: position; absolute; }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" /> <aside class="g-aside"> <!--Sidebar Area--> <div class="g-sidebar-area"> <nav class="g-sidebar py-2 mb-4"> <ul class="nav flex-column" id="nav_accordion"> <li class="nav-item"> <a class="nav-link" href="#"> <i class="bi bi-person-fill"></i> <p>Agents</p> </a> </li> <li class="nav-item has-submenu"> <a class="nav-link" href="#"> <i class="bi bi-columns-gap"></i> <p>Dashboard <i class="bi bi-plus"></i></p> </a> <ul class="submenu collapse"> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> </ul> </li> <li class="nav-item has-submenu"> <a class="nav-link" href="#"> <i class="bi bi-box-fill"></i> <p>IVR <i class="bi bi-plus"></i></p> </a> <ul class="submenu collapse"> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="#"> <i class="bi bi-grid-1x2-fill"></i> <p>Page <span class="badge bg-primary">12</span></p> </a> </li> <!-- <li class="ms-3 mt-3">PROMOTION</li>--> <li class="nav-item has-submenu"> <a class="nav-link" href="#"> <i class="bi bi-record-btn-fill"></i> <p>Campaign <i class="bi bi-plus"></i></p> </a> <ul class="submenu collapse"> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> </ul> </li> <li class="nav-item has-submenu"> <a class="nav-link" href="#"> <i class="bi bi-file-earmark-text-fill"></i> <p>Report <i class="bi bi-plus"></i></p> </a> <ul class="submenu collapse"> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> </ul> </li> <li class="nav-item has-submenu"> <a class="nav-link" href="#"> <i class="bi bi-file-plus-fill"></i> <p>New Report <i class="bi bi-plus"></i></p> </a> <ul class="submenu collapse"> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="#"> <i class="bi bi-record-btn-fill"></i> <p> Skill </p> </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> <i class="bi bi-voicemail"></i> <p>Voice Mail </p> </a> </li> <li class="nav-item has-submenu"> <a class="nav-link" href="#"><i class="bi bi-chat-right-text-fill"></i> <p>Chat <i class="bi bi-plus"></i></p></a> <ul class="submenu collapse"> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> </ul> </li> <li class="nav-item has-submenu"> <a class="nav-link" href="#"><i class="bi bi-envelope-fill"></i> <p>Email <i class="bi bi-plus"></i></p></a> <ul class="submenu collapse"> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> </ul> </li> <li class="nav-item has-submenu"> <a class="nav-link" href="#"><i class="bi bi-file-earmark-text-fill"></i> <p>SMS <i class="bi bi-plus"></i></p></a> <ul class="submenu collapse"> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> </ul> </li> <li class="nav-item has-submenu"> <a class="nav-link" href="#"> <i class="bi bi-window-stack"></i> <p>CRM <i class="bi bi-plus"></i></p> </a> <ul class="submenu collapse"> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> </ul> </li> <li class="nav-item has-submenu"> <a class="nav-link" href="#"> <i class="bi bi-telephone-inbound-fill"></i> <p>CRM Inbound <i class="bi bi-plus"></i></p> </a> <ul class="submenu collapse"> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> <li> <a class="nav-link" href="#"> <i class="bi bi-journal-check"></i> <p>Submenu item 1</p> </a> </li> </ul> </li> </ul> </nav> </div> </aside>