Multi-level menu

Multi-level menu in the left side panel

The standard menu in the left side panel has the following markup:

<ul class="left-menu">
  <li>
     <a href="#">
    <svg class="olymp-star-icon left-menu-icon">
  <use xlink:href="icons/icons.svg#olymp-star-icon"></use>
    </svg>
         <span class="left-menu-title">Fav Pages Feed</span>
 </a>
  </li>
....................
</ul>

The dropdown is implemented based on the Bootstrap accordion.

In order to add a dropdown menu into the standard menu, you need to change menu item markup to the following look:

<ul class="left-menu">
   <li class="accordion" id="accordionExample">
      <div class="accordion-item">
         <h2 class="accordion-header" id="headingOne">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
               <svg class="olymp-newsfeed-icon left-menu-icon"><use xlink:href="#olymp-newsfeed-icon"></use></svg>
               Profile Settings
            </button>
         </h2>
         <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
            <div class="accordion-body">
               <ul class="your-profile-menu">
                  <li>
                     <a href="#">Personal Information</a>
                  </li>
                  <li>
                     <a href="#">Account Settings</a>
                  </li>
                  <li>
                     <a href="#">Change Password</a>
                  </li>
                  <li>
                     <a href="#">Hobbies and Interests</a>
                  </li>
                  <li>
                     <a href="#">Education and Employement</a>
                  </li>
               </ul>
            </div>
         </div>
      </div>
   </li>
    .......
</ul>

To make the dropdown menu expanded by default, you need to add class 'show' to its container, namely:

<div id="collapseOne" class="accordion-collapse collapse show">
 ...
</div>