Sidebars

A Sidebars is a navigation bar that is placed at the left/right of the page:

        
<div class="col-auto p-0 sidebar left shadow-sm toggleCustomer fliph">
  <a href="#" class="button-left user" data-toggle="tooltip" data-placement="right" title="Expand"><i class="icon-collapse-arrow"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i></a>
  <ul class="left-sidebar customerList">
    <li class="d-none">
      <a class="collapsed" href="#"><i class="icon-left-panel"></i></a>
    </li>
    <li  data-attr-title="My Customers" data-toggle="tooltip" data-placement="right" title="" data-original-title="My Customers">
      <a class="collapsed" href="#" data-toggle="collapse" data-target="#customers">
        <i class="icon-customer1"></i>
        <span class="nav-label">My Customers</span>
        <span class="fa fa-chevron-left pull-right"></span>
      </a>
      <ul class="sub-menu collapse" id="customers">
        <li class="active"><a href="#">Overview</a></li>
        <li><a href="#">My Customers</a></li>
      </ul>
    </li>
    <li  data-toggle="tooltip" data-placement="right" data-attr-title="My Dashboard" data-original-title="My Dashboard" title="">
      <a class="collapsed" href="#"><i class="icon-dashboard"></i> <span class="nav-label">My Dashboard</span></a>
    </li>
    <li  data-toggle="tooltip" data-placement="right" data-attr-title="Saved Configurations" data-original-title="Saved Configurations"  title="">
      <a class="collapsed active" href="#">
        <i class="icon-saved"></i>
        <span class="nav-label">Saved Configurations</span>
      </a>
    </li>
    <li  data-toggle="tooltip" data-placement="right" data-attr-title="Integration" data-original-title="Integration" title="">
      <a class="collapsed" href="#" data-toggle="collapse" data-target="#integration">
        <i class="icon-refine"></i>
        <span class="nav-label">Integration</span>
        <span class="fa fa-chevron-left pull-right"></span>
      </a>
      <ul class="sub-menu collapse" id="integration">
        <li class="active"><a href="#">Autotask</a></li>
        <li><a href="#">Connectwise</a></li>
        <li><a href="#">Developer Resource</a></li>
      </ul>
    </li>
  </ul>
</div>