Template with drawer sidebar

by Ricardo Zambon

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container-fluid p-0 h-100">
   <div id="drawer" class="row min-vh-100 no-gutters d-flex h-100 position-relative drawer drawer-expanded">
      <div class="col-3 p-0 h-100 text-white navbar-collapse d-md-flex sidebar w-sidebar">
        <nav class="h-100">
          <div class="navbar-header pt-2 pb-3">
            <div class="navbar-container-brand mb-3 replace-content">
              <div class="navbar-brand when-collapsed">
                Brand
              </div>
              <div class="navbar-brand when-expanded">
                Brand Expanded
              </div>
            </div>

            <div class="navbar-user-container">
              <div class="row no-gutters">
                <div class="col-auto user-profile-picture ml-1"></div>
                <div class="col when-expanded align-self-center ml-2">
                  <span class="navbar-user-name">User full name</span>
                  <span class="navbar-user-department">Department</span>
                </div>
              </div>
            </div>
          </div>
          <ul class="nav flex-column flex-nowrap" data-level="0">
				 <li class="nav-item">
					 <a class="nav-link" href="#">
						 <span class="when-collapsed"><i class="fas fa-home fa-fw fa-lg"></i></span>
						 <span class="when-expanded"><i class="fas fa-home fa-fw mr-1"></i>Dashboard</span>
					 </a>
				 </li>
				 <li class="nav-item">
					 <a class="nav-link" href="#">
						 <span class="when-collapsed"><i class="fas fa-inbox fa-fw fa-lg"></i></span>
						 <span class="when-expanded"><i class="fas fa-inbox fa-fw mr-1"></i>Messages<i class="fas fa-chevron-left fa-xs arrow"></i></span>
					 </a>
					...

CSS

body {
   height: 100vh;
   overflow-x: hidden;
}

/* Default properties and styles */
.navbar-top { border-bottom: 1px solid #e7eaec; }

.collapse-button { background-color: #1ab394; }

/* Side bar */
.w-sidebar {
   background-color: #2f4050;
	color: #676a6c;
	font-size: 0.9rem;
	z-index: 10;
}

.w-sidebar nav {
	padding-left: 0;
	margin-bottom: 0;
	list-style: none;
	z-index: 10;
}

.drawer nav .replace-content {
	position: relative;
}

.drawer.drawer-collapsed .when-expanded {
	display: none;
}

/* Header */
.navbar-header {
	background-image: url('http://webapplayers.com/inspinia_admin-v2.9.2/css/patterns/header-profile.png');
	background-size: 100% 100%;
	background-repeat: none;
	color: #FFF;
}

.navbar-container-brand .navbar-brand {
	text-align: center;
	width: 100%;
}

.user-profile-picture {
	background-image: url('http://webapplayers.com/inspinia_admin-v2.9.2/img/profile_small.jpg');
	background-color: #FFF;
	border-radius: 24px;
	width: 48px;
	height: 48px;
}

.navbar-user-name, .navbar-user-department {
	display: block;
	font-size: 0.9rem;
}
.navbar-user-name {
	font-weight: bold;
	color: #DFE4ED !important;
}
.navbar-user-department {
	color: #8095a8;
}

/* Item */
.w-sidebar nav > ul > li.nav-item {
	background-color: #2f4050;
	border-left: 0px solid #19aa8d;
	transition: all 0.2s;
}
.w-sidebar nav > ul > li.nav-item.active {
	border-left: 4px solid #19aa8d;
	transition: all 0.4s;
}
.w-sidebar ul > li > a {
	color: #a7b1c2;
	font-weight: 600;
	padding: 14px 20px 14px 25px;
	display: block;
	text-overflow: ellipsis;
	overflow: hidden;
	transition: all 0.2s;
}

.w-sidebar .nav-item a {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.w-sidebar ul > li.active a {
	padding: 14px 20px 14px 21px;
	transition: all 0.4s;
	background-color: #293846;
}
.w-sidebar ul > li.active > a {
	color: white;
}
.w-sidebar ul li .arrow {
	float: right;
	margin-top: 0.3rem;
}
.w-sidebar ul > li > a .arrow {
	transition: all 0.15s...

JavaScript

class Drawer {
	constructor (buttonId, sidebarId) {
		var button = document.getElementById(buttonId);
		this.sidebarId = sidebarId;
		button.addEventListener('click', this.drawerCollapse.bind(this));
		
		var sidebar = document.getElementById(sidebarId);
		var items = sidebar.getElementsByClassName('nav-item');
		this.activeItems = [ items[0] ];
		this.activeItems[0].classList.add('active');
		
		for (var i = 0; i < items.length; i++) {
			items[i].getElementsByClassName('nav-link')[0].addEventListener('click', this.itemNavigate.bind(this));
			
			if (items[i].getElementsByTagName('ul').length > 0)
			{
				items[i].classList.add('closed');
			}
		}
		document.addEventListener('click', this.hideFloatingSubMenu.bind(this), false);
	}
	
	drawerCollapse (event) {
		var sidebar = document.getElementById(this.sidebarId);
		if (sidebar.classList.contains('drawer-expanded')) {
			sidebar.classList.remove('drawer-expanded');
			sidebar.classList.add('drawer-fade-out-text');
			sidebar.classList.add('drawer-collapsing');
			setTimeout(function() {
				sidebar.classList.add('drawer-collapse-items');
				sidebar.classList.remove('drawer-fade-out-text');
				setTimeout(function() {
					sidebar.classList.remove('drawer-collapse-items');
					sidebar.classList.remove('drawer-collapsing');
				}, 250);
				sidebar.classList.add('drawer-collapsed');
			}, 125);
		}
		else {
			this.hideFloatingSubMenu(event);
			
			var hideFloatingMenusTimeOut = 0;
			var openMenus = document.getElementsByClassName('float-menu');
			if (openMenus.length > 0) {
				hideFloatingMenusTimeOut = 250;
				openMenus[0].classList.remove('float-menu');
			}
			
			setTimeout(function() {
				sidebar.classList.add('drawer-expanding');
				sidebar.classList.remove('drawer-collapsed');
				setTimeout(function() {
					sidebar.classList.add('drawer-fade-in-text');
					sidebar.classList.remove('drawer-expanding');
					setTimeout(function() {
						sidebar.classList.remove('drawer-fade-in-text');
					},...