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>