Edit the sidebar menu

Sections, links with Font Awesome icons and submenus — one list in the sidebar.

The menu is one list, .sb-nav, inside the sidebar. A section heading is an <li class="sb-section">; each link under it is an <li class="nav-item"> with an icon and a label:

<li class="nav-item">
  <a href="reports.html" class="nav-link">
    <i class="nav-ico fas fa-chart-pie"></i>
    <span>Reports</span>
  </a>
</li>

Icons are Font Awesome 6 classes — keep to the free set. For a submenu, give the link data-toggle="submenu" and data-target pointing at a .sb-subwrap panel with the links in .sb-subnav.

Mark the current page's link with active and aria-current="page". The menu is written into every page, so in a back end move it into one partial file and set the active link from the route.