<header>

</header>

<sidebar>
	<div class="brand">
		<a href="#">α</a>
	</div>
  <button class="app-menu__button">
    <div class="app-icon">
      <span class="app-icon__component"></span>
      <span class="app-icon__component"></span>
      <span class="app-icon__component"></span>
      <span class="app-icon__component"></span>
      <span class="app-icon__component"></span>
      <span class="app-icon__component"></span>
      <span class="app-icon__component"></span>
      <span class="app-icon__component"></span>
      <span class="app-icon__component"></span>
    </div>
   </button>
	<nav>
		<button class="menu-collapse" type="button" data-toggle="collapse" data-target="#myContent" aria-expanded="false" aria-controls="collapseExample">
			<span class="caret"></span> My Content
		</button>
		<div class="collapse in" id="myContent">
			<ul class="nav">
				<li>
					<a href="#">
						<svg class="lnr lnr-star"><use xlink:href="#lnr-star"></use></svg>
						Favourites
					</a>
				</li>
				<li class="active">
					<a href="#">
						<svg class="lnr lnr-eye"><use xlink:href="#lnr-eye"></use></svg>
						Following
					</a>
				</li>
				<li>
					<a href="#">
						<svg class="lnr lnr-tag"><use xlink:href="#lnr-tag"></use></svg>
						Lists
					</a>
				</li>
			</ul>
		</div>
		
		<button class="menu-collapse" type="button" data-toggle="collapse" data-target="#mainContent" aria-expanded="false" aria-controls="collapseExample">
			<span class="caret"></span> Main
		</button>
		<div class="collapse in" id="mainContent">
			<ul class="nav">
				<li>
					<a href="#">
						<svg class="lnr lnr-heart-pulse"><use xlink:href="#lnr-heart-pulse"></use></svg>
						Dashboard
					</a>
				</li>
				<li>
					<a href="#">
						<svg class="lnr lnr-inbox"><use xlink:href="#lnr-inbox"></use></svg>
						Daily Report
					</a>
				</li>
				<li>
					<a href="#">
						<svg class="lnr lnr-download"><use xlink:href="#lnr-download"></use></svg>
						Reports
					</a>
				</li>
			</ul>
		</div>
			
		<button class="menu-collapse" type="button" data-toggle="collapse" data-target="#fundNavigation" aria-expanded="false" aria-controls="collapseExample">
			<span class="caret"></span> Fund
		</button>
		<div class="collapse in" id="fundNavigation">
			<ul class="nav">
				<li>
					<a href="#">
						<svg class="lnr lnr-heart-pulse"><use xlink:href="#lnr-heart-pulse"></use></svg>
						Overview
					</a>
				</li>
				<li>
					<a href="#">
						<svg class="lnr lnr-chart-bars"><use xlink:href="#lnr-chart-bars"></use></svg>
						Performance
					</a>
				</li>
				<li>
					<a href="#">
						<span>$</span>
						Unit Prices
					</a>
				</li>
				<li>
					<a href="#">
						<svg class="lnr lnr-pie-chart"><use xlink:href="#lnr-pie-chart"></use></svg>
						Allocations
					</a>
				</li>
				<li>
					<a href="#">
						<span style="text-transform: lowercase">%</span>
						Attribution
					</a>
				</li>
				<li>
					<a href="#">
						<span style="text-transform: lowercase">&sigma;</span>
						Risk
					</a>
				</li>
				<li>
					<a href="#">
						<svg class="lnr lnr-list"><use xlink:href="#lnr-list"></use></svg>
						Holdings
					</a>
				</li>			
			</ul>			
			
		</div>		
	</nav>
</sidebar>
// Imports

// Open Sans Font incl Greek
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,600,700&subset=latin,greek)

// Variables
$font-family: "Open Sans", Helvetica, Arial, sans-serif

// Mixins
=absolute($top, $left, $right, $bottom)
	position: absolute
	top: $top
	left: $left
	right: $right
	bottom: $bottom

=translate($x,$y)
	-webkit-transform: translate($x,$y)
	-webkit-transform: translate3d($x,$y,0)
	-ms-transform: translate($x,$y)
	-ms-transform: translate3d($x,$y,0)
	transform: translate($x,$y)
	transform: translate3d($x,$y,0)

// Colors
$background-light: #F3F4F8
$background-dark: #2F3032
$border-light: darken($background-light, 2%)
$border-dark: darken($background-dark, 2%)
$primary-color: #004983

// Base
*
	font-family: $font-family

html
	height: 100%
	font-size: 16px

body
	height: 100%
	background: $background-light

header
	position: fixed
	top: 0
	left: 0
	right: 0
	height: 60px
	background: white
	box-shadow: inset 0 -1px 0 0 $border-light

sidebar
	position: fixed
	top: 0
	left: 0
	bottom: 0
	width: 180px
	background: $primary-color

	.brand
		padding: 20px 20px 5px
		
		a
			display: block
			width: 70px
			height: 70px
			margin: 0 auto
			padding: 0
			font:
				size: 2.5rem
				weight: 300
				style: italic
			text:
				align: center
				decoration: none !important
			line-height: 62px
			color: #7a9ab6
			background: #003b69
			border-radius: 100%
	
	button.app-menu__button
		display: block
		display: flex
		flex:
			direction: column
		align-items: center
		justify-content: center
		width: 50px
		height: 50px
		margin: 0 auto 15px
		padding: 14px
		background: none
		border: none
		border-radius: 100%
		outline: none !important
  
		// CSS States
		&:hover
			// ..for default state only
			&:not(.is-expanded)
				.app-icon__component:first-child
					animation: moshpit-1 0.25s ease-in-out infinite alternate 

				.app-icon__component:nth-child(3)
					animation: moshpit-2 0.25s ease-in-out infinite alternate

				.app-icon__component:nth-child(7)
					animation: moshpit-3 0.25s ease-in-out infinite alternate

				.app-icon__component:nth-child(9)
					animation: moshpit-4 0.25s ease-in-out infinite alternate      

		.app-icon
			position: relative
			display: block
			width: 22px
			height: 22px
			margin: 0 0 0 0px
			padding: 0
			background: none
			border: none 

			// Default Button State
			.app-icon__component
				display: inline-block
				position: absolute
				width: 4px
				height: 4px
				background: #7a9ab6
				border-radius: 100%
				transition: transform 0.2s ease-out, background 0.2s ease-out

				&:first-child
					top: 2px
					left: 2px


				&:nth-child(2)
					top: 2px
					left: 50%
					+translate(-50%, 0)

				&:nth-child(3)
					top: 2px
					right: 2px

				&:nth-child(4)
					top: 50%
					left: 2px
					+translate(0, -50%)

				&:nth-child(5)
					top: 50%
					left: 50%
					+translate(-50%, -50%)

				&:nth-child(6)
					top: 50%
					right: 2px
					+translate(0, -50%)

				&:nth-child(7)
					bottom: 2px
					left: 2px

				&:nth-child(8)
					bottom: 2px
					left: 50%
					+translate(-50%,0)

				&:nth-child(9)
					bottom: 2px
					right: 2px  

		// State Based Class assigned on click
		&.is-expanded
			.app-icon__component
				background: transparentize(#b9ccdc, 0.2)

				&:first-child
					// +translate(-2px, -2px)
					transform: translate(3px, 3px) scale(1)

				&:nth-child(2)
					transform: translate(calc(-50% - 9px), -1px) scale(1)

				&:nth-child(3)
					// +translate(2px, -2px)
					transform: translate(-3px, 3px) scale(1)

				&:nth-child(4)
					transform: translate(-2px, calc(-50% + 8px)) scale(1)

				&:nth-child(5)
					transform: translate(-50%, -50%) scale(1)

				&:nth-child(6)
					transform: translate(2px, calc(-50% - 8px)) scale(1)

				&:nth-child(7)
					// +translate(-2px, 2px)
					transform: translate(3px, -3px) scale(1)

				&:nth-child(8)
					transform: translate(calc(-50% + 9px), 1px) scale(1)

				&:nth-child(9)
					// +translate(2px, 2px)
					transform: translate(-3px, -3px) scale(1)

	.menu-collapse
		display: block
		width: 100%
		padding: 6px 20px
		font:
			size: 0.8125rem
			weight: 700
		text:
			align: left
		color: #012c4e
		background: none
		border: none
		outline: none !important
	
		// States
		&.collapsed
			.caret
				transform: rotate(-90deg)
	
		.caret
			margin-right: 6px
			transform-origin: center center
			transition: transform 0.2s ease-in
	
	nav
		max-height: calc(100vh - 145px)
		overflow: auto
	
		&::-webkit-scrollbar
			width: 6px

		/* Track */
		&::-webkit-scrollbar-track
			border-radius: 10px

		/* Handle */
		&::-webkit-scrollbar-thumb
			border-radius: 10px
			background: $primary-color
	
	ul.nav
		margin-bottom: 25px
	
		li
			a
				display: block
				position: relative
				padding-left: 50px
				font:
					size: 0.875rem
					weight: 400
				text:
					transform: uppercase
					decoration: none
				letter-spacing: 0.2px
				color: #467193
		
				&:hover
					color: transparentize(#b9ccdc, 0.2)
					background: none
		
				&:focus
					background: none
		
				svg
					+absolute(50%,15px,null,null)
					width: 20px
					height: 20px
					fill: currentColor
					+translate(0,-50%)
		
				.lnr-star
					margin-top: -1px		/* adjuster */
		
				span
					display: block
					+absolute(50%,15px,null,null)
					width: 20px
					height: 20px
					margin-left: -1px		/* adjuster */
					font:
						size: 1.5rem
						weight: 300
					text:
						align: center
					line-height: 1.1rem
					+translate(0,-50%)
		
		li.active
			a
				color: transparentize(#b9ccdc, 0.2)
				background: transparentize(#b9ccdc, 0.9)
	
// Animation keyframes
@keyframes moshpit-1
	from
		+translate(0,0)
	to
		+translate(-2px,-2px)
    
@keyframes moshpit-2
	from
		+translate(0,0)
	to
		+translate(2px,-2px)  
    
@keyframes moshpit-3
	from
		+translate(0,0)
	to
		+translate(-2px,2px) 
    
@keyframes moshpit-4
	from
		+translate(0,0)
	to
		+translate(2px,2px) 
		
	
View Compiled
$('button').on('click', function(e){
  e.preventDefault();
  $(this).toggleClass('is-expanded');
})

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js
  2. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js