<nav class="sidebar-navigation">
	<ul>
		<li class="active">
			<i class="fa fa-share-alt"></i>
			<span class="tooltip">Connections</span>
		</li>
		<li>
			<i class="fa fa-hdd-o"></i>
			<span class="tooltip">Devices</span>
		</li>
		<li>
			<i class="fa fa-newspaper-o"></i>
			<span class="tooltip">Contacts</span>
		</li>
		<li>
			<i class="fa fa-print"></i>
			<span class="tooltip">Fax</span>
		</li>
		<li>
			<i class="fa fa-sliders"></i>
			<span class="tooltip">Settings</span>
		</li>
	</ul>
</nav>

//Basics
* {
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: 'Lato', sans-serif;
	line-height: 1;
}

body {
	background-color: #F5F6F8;
	overflow: hidden;
}

//Color Variables
$sidebar-background-color: #313443;
$active-sidebar-link-color: #22252E;
$hover-sidebar-link-color: $active-sidebar-link-color;
$active-link-color: #98D7EC;
$tooltip-background-color: $sidebar-background-color;

.sidebar-navigation {
	display: inline-block;
	min-height: 100vh;
	width: 80px;
	background-color: $sidebar-background-color;
	float: left;
	
	ul {
		text-align: center;
		color: white;
		
		li {
			padding: 28px 0;
			cursor: pointer;
			transition: all ease-out 120ms;
			
			i {
				display: block;
				font-size: 24px;

				transition: all ease 450ms;
			}
			
			.tooltip {
				display: inline-block;
				position: absolute;
				background-color: $tooltip-background-color;
				padding: 8px 15px;
				border-radius: 3px;
				margin-top: -26px;
				left: 90px;
				opacity: 0;
				visibility: hidden;
				font-size: 13px;
				letter-spacing: .5px;
				
				&:before {
					content: '';
					display: block;
					position: absolute;
					left: -4px;
					top: 10px;
					transform: rotate(45deg);
					width: 10px;
					height: 10px;
					background-color: inherit;
				}
			}
			
			&:hover {
				background-color: $hover-sidebar-link-color;
				
				.tooltip {
					visibility: visible;
					opacity: 1;
				}
			}
			
			&.active {
				background-color: $active-sidebar-link-color;
				
				i {
					color: $active-link-color;
				}
			}			
		}
	}
}

$('ul li').on('click', function() {
	$('li').removeClass('active');
	$(this).addClass('active');
});