<div class="container" role="presentation">
	<aside role="complementary" class="sidebar">
		<header class="logo">
			<a href="#" title="Dashboard" class="logo-link"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 65.3 65.3" enable-background="new 0 0 65.3 65.3" xml:space="preserve">
				<g>
					<circle cx="32.6" cy="32.6" r="31.1" class="logo-circle"/>
					<path d="M35 7.4C19.3 5.9 6.1 19 7.7 34.8C8.8 46.5 18.3 55.9 30 57.1c15.8 1.6 28.9-11.6 27.4-27.4 C56.1 18 46.7 8.6 35 7.4z M29.7 44.3c0 0.3-0.4 0.6-0.7 0.6c0 0-5.4 0.8-8.8-2.5c-3.1-3.1-2.5-8.8-2.5-8.8c0-0.3 0.3-0.6 0.7-0.7 c0 0 5.6-0.6 8.8 2.5C30.5 38.8 29.7 44.3 29.7 44.3z M23.6 23.6c-0.2-0.3-0.2-0.8 0.1-1.1c0 0 3.8-4.9 9.2-4.8 c5 0.1 8.9 5.2 8.9 5.2c0.2 0.3 0.2 0.8 0 1.1c0 0-4.1 4.9-9.1 4.8C27.2 28.7 23.6 23.6 23.6 23.6z M44.7 42.5 c-3.4 3.4-8.9 2.6-8.9 2.6c-0.3 0-0.7-0.3-0.7-0.6c0 0-0.8-5.5 2.6-8.9c3.2-3.2 8.8-2.5 8.8-2.5c0.3 0 0.6 0.3 0.7 0.7 C47.2 33.7 47.8 39.4 44.7 42.5z" class="logo-inner"/>
				</g>
				</svg>
				<span class="logo-fallback" role="presentation">Z</span>
			</a>
		</header>
		<nav role="navigation">
			<ul class="sidebar-list">
				<li class="sidebar-list-item"><a href="#" class="sidebar-list-item-link active">Dashboard <span class="fa fa-tachometer"></span></a></li>
				<li class="sidebar-list-item"><a href="#" class="sidebar-list-item-link">Messages <span class="fa fa-comments"></span></a></li>
				<li class="sidebar-list-item"><a href="#" class="sidebar-list-item-link">Expenses <span class="fa fa-usd"></span></a></li>
				<li class="sidebar-list-item"><a href="#" class="sidebar-list-item-link">Mortgages <span class="fa fa-bank"></span></a></li>
				<li class="sidebar-list-item"><a href="#" class="sidebar-list-item-link">Properties <span class="fa fa-building"></span></a></li>
				<li class="sidebar-list-item"><a href="#" class="sidebar-list-item-link">Settings <fa class="fa fa-cogs"></fa></a></li>
			</ul>
		</nav>
	</aside>
	<main role="main">
		<dis class="placeholder-text">
			<p class="hint">This is where messages would appear</p>
		</dis>
	</main>
</div>

$sidebarColour ?= #436B4E

$sidebarLinkColour ?= $sidebarColour - 10

body, html
	font-size 100%
	width 100%
	height 100%

body
	font-family "Segoe UI", "Helvetica Neue", sans-serif

$logoStrokeWidth ?= 3
$logoAccentColour ?= #00A551
$logoColour ?= #f1f1f2
$logoStrokeColour ?= $logoColour
	
.logo
	padding 1.5em
	&-fallback
		transition 1.5s ease opacity, 0.2s transform, 0.4s color
		display block
		opacity 0
		position absolute
		font-weight 100
		top 50%
		left 50%
		color initial
		font-size 4.6em
		z-index 1
		transform scale(0) translateX(-0.25em) translateY(-0.5em) rotate(0deg)
	&-link
		display block
		transition 0.3s linear transform
		transform scale(1)
		&:hover
			.logo-fallback
				opacity 1
				transform scale(1) translateX(-0.25em) translateY(-0.5em) rotate(90deg)
				color #fff
			.logo-circle
				stroke-width $logoStrokeWidth
			.logo-inner
				transform rotate(90deg)
				opacity 0.4
			transform scale(0.9)
	&-circle
		stroke-width 0
		stroke $logoStrokeColour
		stroke-linecap round
		stroke-miterlimit 10
		fill $logoAccentColour
		transition stroke-width 0.3s linear
	&-inner
		fill $logoColour
		transform scale(0.5)
		transition 0.4s ease transform, 0.2s ease opacity
		transform-origin 2em 2em
.container
	height 100%
	display table
	> *
		display table-cell

.placeholder-text
	text-align center
main
	vertical-align middle
	width 100%
	padding 3%
.sidebar
	display table-cell
	box-shadow 0 0 1em
	max-width 15em
	min-width 10em
	background #436B4E
	&-list
		color #fff
		font-size 1.1em
		&-item
			.fa
				float left
				min-width 2em
				opacity 0.4
				transition 0.3s ease opacity
			& + &
				.sidebar-list-item-link
					border-top 1px solid $sidebarLinkColour - 10
			&-link
				display block
				transition background 0.3s ease, opacity 0.2s ease
				color inherit
				background $sidebarLinkColour
				&:hover, &.active
					background $sidebarLinkColour - 25
					.fa
						opacity 0.9
				&.active
					border-right 0.15em solid currentColor
				white-space nowrap
				text-decoration inherit
				padding 0.7em 1em
View Compiled

External CSS

  1. https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js