Youtube - Sidebar Bootstrap 5 | Coding

League
HTML
<div class="main-container d-flex">
<div class="sidebar" id="side_nav">
<div class="header-box px-2 pt-3 pb-4 d-flex justify-content-between">
<h1 class="fs-4"><span class="bg-white text-dark rounded shadow px-2 me-2">CL</span>
<span
class="text-white">Coding League</span></h1>
<button class="btn d-md-none d-block close-btn px-1 py-0 text-white"><i
class="fal fa-stream"></i></button>
</div>

<ul class="list-unstyled px-2">

<li class="active"><a href="#" class="text-decoration-none px-3 py-2 d-block"><i
class="fal fa-home"></i> Dashboard</a></li>
<li class=""><a href="#" class="text-decoration-none px-3 py-2 d-block"><i class="fal fa-
list"></i>
Projects</a></li>
<li class=""><a href="#" class="text-decoration-none px-3 py-2 d-block d-flex justify-
content-between">
<span><i class="fal fa-comment"></i> Messages</span>
<span class="bg-dark rounded-pill text-white py-0 px-2">02</span>
</a>
</li>
<li class=""><a href="#" class="text-decoration-none px-3 py-2 d-block"><i
class="fal fa-envelope-open-text"></i> Services</a></li>
<li class=""><a href="#" class="text-decoration-none px-3 py-2 d-block"><i class="fal fa-
users"></i>
Customers</a></li>
</ul>
<hr class="h-color mx-2">
 <ul class="list-unstyled px-2">
<li class=""><a href="#" class="text-decoration-none px-3 py-2 d-block"><i class="fal fa-
bars"></i>
Settings</a></li>
<li class=""><a href="#" class="text-decoration-none px-3 py-2 d-block"><i class="fal fa-
bell"></i>
Notifications</a></li>

</ul>

</div>
<div class="content">
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container-fluid">
<div class="d-flex justify-content-between d-md-none d-block">
<button class="btn px-1 py-0 open-btn me-2"><i class="fal fa-stream"></i></button>
<a class="navbar-brand fs-4" href="#"><span class="bg-dark rounded px-2 py-0 text-
white">CL</span></a>

</div>
<button class="navbar-toggler p-0 border-0" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<i class="fal fa-bars"></i>
</button>
<div class="collapse navbar-collapse justify-content-end"
id="navbarSupportedContent">
<ul class="navbar-nav mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Profile</a>
</li>

</ul>
 </div>
</div>
</nav>

<div class="dashboard-content px-3 pt-4">

<h2 class="fs-5"> Dashboard</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, totam? Sequi alias
eveniet ut quas
ullam delectus et quasi incidunt rem deserunt asperiores reiciendis assumenda
doloremque provident,
dolores aspernatur neque.</p>
</div>
</div>
</div>
CSS
body{
background: #eee;
}

#side_nav{
background: #000;
min-width: 250px;
max-width: 250px;
transition: all 0.3s;
}
.content{
min-height: 100vh;
width: 100%;
}
hr.h-color{
background: #eee;
}
.sidebar li.active{
background: #eee;
border-radius: 8px;
}

.sidebar li.active a, .sidebar li.active a:hover {

color: #000;
}
.sidebar li a{
color: #fff;
}

@media(max-width: 767px){
#side_nav{
margin-left: -250px;
position: absolute;
min-height: 100vh;
z-index: 1;

}
#side_nav.active{
margin-left: 0;
}
}
JS
$(".sidebar ul li").on('click', function () {
$(".sidebar ul li.active").removeClass('active');
$(this).addClass('active');
});

$('.open-btn').on('click', function () {
 $('.sidebar').addClass('active');

});

$('.close-btn').on('click', function () {
$('.sidebar').removeClass('active');

})