CODE EXAMPLE FOR HTML

tree view in bootstrap

<div class="container-fluid" style="margin-right: 150px; ">
    <div class="row">
      <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse scr"
        style="margin-left: 83%;margin-top: 50px; box-shadow: 5px 5px 10px gray , -5px 5px 10px black;">
        <div class="position-sticky pt-3 " >
          <img class="img-thumbnail w-50 mt-0" src="../assets/images/admin.jpg" alt="" style="margin-top: -55%; margin-right: 24%;">
          <ul class="nav flex-column" id="nav_accordion" >
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#" style="color: black !important;">
                <i class="fa-solid fa-chart-line"></i>
                داشبورد
              </a>
            </li>
            <hr>
            <li class="nav-item has-submenu">
              <a class="nav-link" href="#"><i class="fa-solid fa-house-chimney"></i>صفحه اصلی<i class="fa fa-caret-down iconside" aria-hidden="true"></i> </a>
              <ul class="submenu collapse">
                <li><a class="nav-link opt" href="#"> <i class="fa-solid fa-bars "></i> منوی بالایی</a></li>
                <li><a class="nav-link opt" href="#"> <i class="fa-solid fa-sliders"></i>اسلاید</a></li>
                <li><a class="nav-link" href="#"> <i class="fa-solid fa-bell-concierge"></i>خلاصه خدمات
                  </a></li> 
                <li><a class="nav-link opt" href="#"> <i class="fa-regular fa-address-card"></i>درباره ما
                  </a></li> 
                <li><a class="nav-link opt" href="#"><i class="fa-solid fa-arrow-down-1-9"></i> شمارنده
                  </a></li> 
           
              </ul>
            </li>
        
            <hr>

            <li class="nav-item has-submenu">
              <a class="nav-link" href="#"> <i class="fa-brands fa-blogger-b"></i>صفحه مقالات <i class="fa fa-caret-down iconside1" aria-hidden="true"></i>
              </a>
              <ul class="submenu collapse">
                <li><a class="nav-link opt" href="#"> <i class="fa-solid fa-sliders"></i>اسلایدر کوچک</a></li>
                <li><a class="nav-link opt" href="#"><i class="fa-solid fa-sliders"></i>اسلایدر بزرگ</a></li>
                <li><a class="nav-link opt" href="#"> <i class="fa-solid fa-heading"></i>عنوان صفحه</a> </li>
               
              </ul>
            </li>
            <hr>
            <li class="nav-item has-submenu">
              <a class="nav-link" href="#"> <i class="fa-solid fa-id-card-clip"></i>صفحه ارتباط با ما <i class="fa fa-caret-down iconside2" aria-hidden="true"></i>
              </a>
              <ul class="submenu collapse">
                <li><a class="nav-link opt" href="#"><i class="fa-regular fa-images"></i> تصویر</a></li>
                <li><a class="nav-link opt" href="#"> <i class="fa-solid fa-closed-captioning"></i>کپشن</a></li>
                
              </ul>
            </li>
            <hr>
            <li class="nav-item has-submenu">
              <a class="nav-link" href="#"> <i class="fa-solid fa-eject"></i>صفحه درباره ما <i class="fa fa-caret-down iconside3" aria-hidden="true"></i>
              </a>
              <ul class="submenu collapse">
                <li><a class="nav-link opt" href="#"><i class="fa-regular fa-image"></i> تصاویر</a></li>
                <li><a class="nav-link opt" href="#"><i class="fa-solid fa-text-width"></i> متن ها</a></li>
              </ul>
            </li>
            <hr>
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#" style="color: black !important;">
                <i class="fa-solid fa-id-card"></i>   
                           ویرایش پنل کاربری
              </a>
            </li>
        </div>
      </nav>