aside - Левый сайдбар (id=leftaside)
<aside id="leftaside" class="main-sidebar sidebar-dark-primary elevation-4">
<!-- Sidebar -->
<div class="sidebar">
<!-- Sidebar user panel (optional) -->
<div class="user-panel mt-3 pb-3 mb-3 d-flex">
<div class="image">
<img src="dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
</div>
<div class="info">
<a href="#" class="d-block">Alexander Pierce</a>
</div>
</div>
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<li class="nav-item">
<a href="./index4.html" class="nav-link">
<i class="nav-icon fas fa-th"></i>
<p>
Dashboard
<span class="right badge badge-danger">New</span>
</p>
</a>
</li>
<li class="nav-item">
<a href="./Post.html" class="nav-link">
<i class="nav-icon fas fa-th"></i>
<p>
Постинг
<span class="right badge badge-danger">New</span>
</p>
</a>
</li>
<li class="nav-item">
<a href="./Post.html" class="nav-link">
<i class="nav-icon fas fa-th"></i>
<p>
Продвижение
<span class="right badge badge-danger">New</span>
</p>
</a>
</li>
<li class="nav-item">
<a href="./Post.html" class="nav-link">
<i class="nav-icon fas fa-th"></i>
<p>
Настройки
<span class="right badge badge-danger">New</span>
</p>
</a>
</li>
<li class="nav-header">Раздел №2</li>
<li class="nav-item">
<a href="pages/calendar.html" class="nav-link">
<i class="nav-icon fas fa-calendar-alt"></i>
<p>
График
<span class="badge badge-info right">2</span>
</p>
</a>
</li>
<li class="nav-item">
<a href="pages/gallery.html" class="nav-link">
<i class="nav-icon far fa-image"></i>
<p>
Фото
</p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon far fa-envelope"></i>
<p>
Почта
<i class="fas fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="pages/mailbox/mailbox.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Входящие</p>
</a>
</li>
<li class="nav-item">
<a href="pages/mailbox/compose.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Compose ?</p>
</a>
</li>
<li class="nav-item">
<a href="pages/mailbox/read-mail.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Прочитанные</p>
</a>
</li>
</ul>
</li>
</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>
Стили, которые использованы в части кода
main-sidebar
sidebar-dark-primary
elevation-4
right -
badge - Бейдж. Библиотека Бутстрап
badge-info - Бейдж. Светлый
badge-danger - Бейдж. Красный