We can make a collapsing sidebar menu using bootstrap and jQuery .Learn how to create a collapsible sidepanel menu.Bootstrap 4 Collapsible Toggle Sidebar with navbar snippet example is best for all kind .Filter elements, sidebar filter panel bootstrap 4. .side-nav-light for light .
Bootstrap 4 is easy to learn . We can make a responsive menu or Sidebar panel using bootstrap 3 or bootstrap 4 .I used Jquery for toggling the Sidebar menu or sidebar panel. You can use JavaScript or Jquery for your convivence.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
<style>
li a{
font-size:15px;
}
.content li a
{
margin-top:10px;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #36344d;">
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link text-white" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">Features</a>
</li>
</ul>
<span class="navbar-text mr-5 text-white" id="user_id" style="cursor: pointer">
<h3><i class="fas fa-user-plus"></i></h3>
</span>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sm-8">
<h3 class="mt-5">Basic Navbar Example</h3>
<p>A navigation bar is a navigation header that is placed at the top of the page.</p>
<p>The navbar-expand-xl|lg|md|sm class determines when the navbar should stack vertically (on extra large, large, medium or small screens).</p>
</div>
<div class="col-sm-4">
<div class="position-absolute" id="user_detail" style="display:none;box-shadow: 0px 2px 4px 1px rgb(0 0 0 / 20%);margin-left:150px;width:75%">
<div class="header p-4" style="background-color: #673de6">
<h5 class="w3-bar-item text-white">Antony Dishar</h5>
<h6 class="w3-bar-item text-white">antony1221@gmail.com</h6>
</div>
<div class="content p-4 bg-light">
<ul class="navbar-nav">
<li class="nav-item active mb-3">
<i class="fas fa-user"></i><span class="ml-2"><a href="#">Account Information</a></span>
</li>
<li class="nav-item mb-3">
<i class="fas fa-lock"></i><span class="ml-2"><a href="#">Feature</a></span>
</li>
<li class="nav-item active mb-3">
<i class="fas fa-bell"></i><span class="ml-2"><a href="#">Notification</a></span>
</li>
<li class="nav-item mb-3">
<i class="fas fa-cog"></i></i><span class="ml-2"><a href="#">Setting</a></span>
</li>
<li class="nav-item mb-3">
<i class="fas fa-exchange-alt"></i></i><span class="ml-2"><a href="#">Migrate</a></span>
</li>
<li class="nav-item mb-3">
<i class="fas fa-money-bill-alt"></i><span class="ml-2"><a href="#">Earn with us</a></span>
</li>
<li class="nav-item mb-3">
<i class="fas fa-exchange-alt"></i></i><span class="ml-2"><a href="#">Transfer</a></span>
</li>
<li class="nav-item mb-3">
<i class="fas fa-question"></i><span class="ml-2"><a href="#">Help</a></span>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#user_id').click(function(){
//alert('ddd')
$('#user_detail').toggle('');
});
});
</script> Now Click on right side user icon you will get the result.
Basic Navbar Example
A navigation bar is a navigation header that is placed at the top of the page.
The navbar-expand-xl|lg|md|sm class determines when the navbar should stack vertically (on extra large, large, medium or small screens).
You can visit more tutorials .