body.sidebar-is-reduced
	header.l-header
		div.l-header__inner.clearfix
			div.c-header-icon.js-hamburger
				div.hamburger-toggle
					span.bar-top
					span.bar-mid
					span.bar-bot
			div.c-header-icon.has-dropdown
				span.c-badge.c-badge--red.c-badge--header-icon.animated.swing="13"
				i.fa.fa-bell
				div.c-dropdown.c-dropdown--notifications
					div.c-dropdown__header
					div.c-dropdown__content
			div.c-search
				input.c-search__input.u-input(
				placeholder="Search..."
				type="text"
				)
			div.header-icons-group
				div.c-header-icon.basket
					span.c-badge.c-badge--blue.c-badge--header-icon.animated.swing="4"
					i.fa.fa-shopping-basket
				div.c-header-icon.logout
					i.fa.fa-power-off
	div.l-sidebar
		div.logo
			div.logo__txt="D"
		div.l-sidebar__content
			nav.c-menu.js-menu
				ul.u-list
					li.c-menu__item.is-active(
						data-toggle="tooltip"
						title="Flights"
					)
						div.c-menu__item__inner
							i.fa.fa-plane
							div.c-menu-item__title
								span="Flights"
					li.c-menu__item.has-submenu(
						data-toggle="tooltip"
						title="Modules"
					)
						div.c-menu__item__inner
							i.fa.fa-puzzle-piece
							div.c-menu-item__title
								span="Modules"
							div.c-menu-item__expand.js-expand-submenu
								i.fa.fa-angle-down
						ul.c-menu__submenu.u-list
							li="Payments"
							li="Maps"
							li="Notifications"
					li.c-menu__item.has-submenu(
						data-toggle="tooltip"
						title="Statistics"
					)
						div.c-menu__item__inner
							i.far.fa-chart-bar
							div.c-menu-item__title
								span="Statistics"
					li.c-menu__item.has-submenu(
						data-toggle="tooltip"
						title="Gifts"
					)
						div.c-menu__item__inner
							i.fa.fa-gift
							div.c-menu-item__title
								span="Gifts"
					li.c-menu__item.has-submenu(
						data-toggle="tooltip"
						title="Settings"
					)
						div.c-menu__item__inner
							i.fa.fa-cogs
							div.c-menu-item__title
								span="Settings"
main.l-main
	div.content-wrapper.content-wrapper--with-bg
		h1.page-title="Dashboard"
		div.page-content="Content goes here"
View Compiled
//FONT
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700&subset=latin-ext');

// VARIABLES - MAIN
$sidebarReducedWidth: 70px;
$sidebarExpandedWidth: 220px;

// VARIABLES - COLORS
$main-color: #102c58;
$text-color: #ababab;;
$light-blue: #5f9cfd;
$red: #f91605;
$navy: #051835;
$bg-color-light: #f3f3f3;
$bg-color-dark: $navy;
$orange: #f5642d;
$light-grey: #d0d0d0;
$header-color: #ffffff;

//MIXIMS
@mixin transition($args...) {
	-webkit-transition: $args;
	-moz-transition: $args;
	-ms-transition: $args;
	-o-transition: $args;
	transition: $args;
}

@mixin border-radius($radius) {
	-webkit-border-radius: $radius;
	border-radius: $radius;
	background-clip: padding-box;
}

@mixin box-shadow($args...) {
 	-webkit-box-shadow: $args;
	-moz-box-shadow: $args;
	box-shadow: $args;
}

@mixin linear-gradient($top, $bottom) {
    background: $top;
    background: -moz-linear-gradient(top,  $top 0%, $bottom 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom));
    background: -webkit-linear-gradient(top,  $top 0%,$bottom 100%);
    background: -o-linear-gradient(top,  $top 0%,$bottom 100%);
    background: -ms-linear-gradient(top,  $top 0%,$bottom 100%);
    background: linear-gradient(to bottom,  $top 0%,$bottom 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000',GradientType=0);
}

%clearfix {
	*zoom: 1;
	&:before, &:after {
		content: " ";
		display: table;
	}
	&:after {
		clear: both;
	}
}

//STYLES
html, body {
	height: 100%;
	width:100%;
}

body {
	margin: 0;
	padding: 0;
	font-family: "Open Sans";
	font-size: 14px;
	font-weight:400;
	overflow: hidden;
	background-color: $bg-color-light;
	color: $main-color;
}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

::-webkit-input-placeholder{
	color: #c3c3c3;
}

p {
	color: $text-color;
}

h1 {
	font-size:24px;
}

h2 {
	font-size:20px;
}

h3 {
	font-size:18px;
}

.u-list {
	margin:0;
	padding:0;
	list-style:none;
}

.u-input {
	outline:0;
	border:1px solid $light-grey;
	padding:5px 10px;
	height:35px;
	font-size:12px;
	
	@include border-radius(10px);
}

.c-badge {
	font-size: 10px;
    font-weight: 700;
    min-width: 20px;
    padding: 5px;
    border-radius: 4px;
    display: block;
    line-height: 0.7;
    color: #fff;
	text-align:center;
    white-space: nowrap;
	background-color: $main-color;
	border: 1px solid darken($main-color, 5);
	
	&--red {
		background-color: $red;
		border: 1px solid darken($red, 5);
	}
	
	&--blue {
		background-color: $light-blue;
		border: 1px solid darken($light-blue, 5);
	}
	
	&--header-icon {
		position:absolute;
		bottom: -9px;
	}
}

.tooltip {
	width: 120px;
	&-inner {
		padding: 8px 10px;
		color: #fff;
		text-align: center;
		background-color: #051835;
		font-size: 12px;
		border-radius: 3px;
	}
	&-arrow {
		border-right-color: #051835 !important;
	}
}

.hamburger-toggle {
    position: relative;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
	order:1;
	
	[class*='bar-'] {
		display: block;
		background: $main-color;
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: .2s ease all;
		transition: .2s ease all;

		border-radius: 2px;
		height: 2px;
		width: 24px;
		margin-bottom: 4px;
		
		&:nth-child(2) {
			width: 18px;
		}
		
		&:last-child {
			margin-bottom: 0;
			width: 12px;
		}
	}
	
	&.is-opened {
		left:3px;
		
		[class*='bar-'] {
			background: $main-color;
		}
		
		.bar-top {
			-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
			-webkit-transform-origin: 15% 15%;
			transform-origin: 15% 15%;
		}

		.bar-mid {
			opacity: 0;
		}

		.bar-bot {
			-webkit-transform: rotate(45deg);
			transform: rotate(-45deg);
			-webkit-transform-origin: 15% 95%;
			transform-origin: 15% 95%;
			width: 24px;
		}
	} 

	&:focus {
		outline-width: 0;
	}
	
}

.header-icons-group {
    display: flex;
	order:3;
	margin-left:auto;
	height: 100%;
	border-left:1px solid darken($header-color, 20%);
	
	.c-header-icon:last-child {
		border-right:0;
	}
}

.c-header-icon {
	position:relative;
	display: flex;
	flex-shrink: 0;
	float:left;
	width: 70px;
	height: 100%;
	align-items:center;
	justify-content:center;
	line-height: 1;
	cursor: pointer;
	border-right:1px solid darken($header-color, 20%);
	
	svg {
		font-size: 18px;
		line-height: 40px;
	}
	
	&--in-circle {
		border:1px solid $light-grey;
		border-radius: 100%;
	}
	
	&:hover {
		svg {
			color: $orange;
		}
		
		[class*='bar-'] {
			background: $orange;
		}
	}
	
// 	&.has-dropdown {
// 		&:hover {
// 			.c-dropdown {
// 				opacity:1;
// 				top:50px;
// 			}
			
// 		}
// 	}
}

.l-header {
	padding-left: $sidebarReducedWidth;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 10;
	width: 100%;
	background: $header-color;
		
	&__inner {
		height: 100%;
		width: 100%;
		display:flex;
		height:70px;
		align-items: center;
		justify-content:stretch;
		border-bottom: 1px solid;
		border-color: darken($header-color, 20%);
	}
	
	.sidebar-is-expanded & {
		padding-left: $sidebarExpandedWidth;
	}
	
	@include transition(padding 0.5s ease-in-out);
}

.c-search {
	display:flex;
	flex-grow: 1;
	height:100%;
	
	&__input {
		border-top-right-radius:0px;
		border-bottom-right-radius:0px;
		border-right:0;
		width: 100%;
		height:100%;
		border:0;
		font-size:14px;
		padding:0 20px;
		
		@include transition(all 0.3s ease-in-out);
	}
	
}

.c-dropdown {
	opacity:0;
	text-align:left;
	position: absolute;
	flex-direction:column;
	display:none;
    width: 300px;
    top: 30px;
    right: -40px;
	background-color: #fff;
	overflow:hidden;
	min-height:300px;
	border:1px solid $light-grey;
	
	@include border-radius(10px);
	@include box-shadow(0px 5px 14px -1px #cecece);
	@include transition(all 0.3s ease-in-out);
}

.l-sidebar {
	width: $sidebarReducedWidth;
	position: absolute;
	z-index: 10;
	left: 0;
	top: 0;
	bottom: 0;
	background: $main-color;
	
	.logo {
		width: 100%;
		height: 70px;
		display: flex;
    	align-items: center;
    	justify-content: center;
		background-color: $navy;
		
		.logo__txt {
			font-size:26px;
			line-height:1;
			color:#fff;
			text-align:center;
			font-weight:700;
		}
	}
	
	&__content {
		height:100%;
		position:relative;
	}
	
	.sidebar-is-expanded & {
		width: $sidebarExpandedWidth;
	}

	@include transition(width 0.5s ease-in-out);
}

.c-menu {
	> ul {
		display:flex;
		flex-direction:column;

		.c-menu__item {
			color: #184a98;
			max-width: 100%;
			overflow: hidden;
			
			&__inner {
				display:flex;
				flex-direction:row;
				align-items:center;
				min-height: 60px;
				position: relative;
				cursor: pointer;
				@include transition(background-color 0.5s ease-in-out);
				
				&:before {
					position:absolute;
					content: " ";
					height: 0;
					width:2px;
					left:0;
					top:50%;
					margin-top:-18px;
					background-color:$light-blue;
					opacity:0;

					@include transition(all 0.5s ease-in-out);
				}
			}
			
			&.is-active {
				color: #fff;
				
				.c-menu__item__inner {
					border-left-color: #fff;
					background-color: #1e3e6f;
					
					svg {
						color: #fff;
					}

					.c-menu-item__title { 
						span {
							color: #fff;
						}	
					}

					&:before {
						height: 36px;
						opacity:1;
					}
					
				}
				
			}
			
			&:not(.is-active):hover {
				color: #fff;
				.c-menu__item__inner {
					background-color: $orange;
					border-left-color: $orange;
				}
			}

			svg {
				flex:0 0 $sidebarReducedWidth;
				font-size: 16px;
				font-weight: normal;
				text-align: center;
				
				
				@include transition(all 0.5s ease-in-out);
			}
			
			.c-menu-item__expand {
				position:relative;
				left:100px;
				padding-right:20px;
				color: #fff;
				margin-left:auto;
				
				@include transition(left 1.0s ease-in-out);
				
				.sidebar-is-expanded & {
					left:0px;
				}
			}

			.c-menu-item__title {
				flex-basis:100%;
				padding-right: 10px;
				position: relative;
				color: #fff;
				left: $sidebarExpandedWidth;
				opacity:0;
				
				span {
					font-weight:400;
					font-size:14px;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					
					@include transition(left 0.5s ease-in-out);
				}
				
				.sidebar-is-expanded & {
					left:0px;
					opacity:1;
				}
				
				@include transition(all 0.7s ease-in-out);
			}
			
			.c-menu__submenu {
				background-color:$navy;
				padding:15px;
				font-size:12px;
				display:none;
				
				li {
					padding-bottom:15px;
					margin-bottom:15px;
					border-bottom:1px solid;
					border-color:lighten($navy, 4%);
					color:$light-blue;
					
						
					&:last-child {
						margin:0;
						padding:0;
						border:0;
					}
				}
			}
		}
	}
}

main.l-main {
	width: 100%;
	height: 100%;
	padding: 70px 0 0 $sidebarReducedWidth;

	.content-wrapper {
		padding: 25px;
		height: 100%;
    	overflow: auto;
		
		.page-content {
			border-top:1px solid $light-grey;
			padding-top:25px;
			color: $text-color;
		}
		
		&--with-bg {
			.page-content {
				background: #fff;
				border-radius: 3px;
				border: 1px solid $light-grey;
				padding: 25px;
			}
		}
	}

	.page-title {
		font-weight: 400;
		margin-top: 0;
		margin-bottom: 25px;
	}
	
	.sidebar-is-expanded & {
		padding-left: $sidebarExpandedWidth;
	}

	@include transition(padding 0.5s ease-in-out);
}
View Compiled
let Dashboard = (() => {
	let global = {
		tooltipOptions: {
			placement: "right"
		},
		menuClass: ".c-menu"
	};

	let menuChangeActive = el => {
		let hasSubmenu = ($(el).hasClass("has-submenu"));
		$(global.menuClass + " .is-active").removeClass("is-active");
		$(el).addClass("is-active");
		
		// if (hasSubmenu) {
		// 	$(el).find("ul").slideDown();
		// }
	};

	let sidebarChangeWidth = () => {
		let $menuItemsTitle = $("li .menu-item__title");

		$("body").toggleClass("sidebar-is-reduced sidebar-is-expanded");
		$(".hamburger-toggle").toggleClass("is-opened");
		
		if ($("body").hasClass("sidebar-is-expanded")) {
			$('[data-toggle="tooltip"]').tooltip("destroy");
		} else {
			$('[data-toggle="tooltip"]').tooltip(global.tooltipOptions);
		}
		
	};

	return {
		init: () => {
			$(".js-hamburger").on("click", sidebarChangeWidth);

			$(".js-menu li").on("click", e => {
				menuChangeActive(e.currentTarget);
			});

			$('[data-toggle="tooltip"]').tooltip(global.tooltipOptions);
		}
	};
})();

Dashboard.init();
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
  2. https://use.fontawesome.com/releases/v5.0.8/js/all.js
  3. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js