Bootstrap / Angular / LESS / Jade - Quick Leftside Menu Dashbord

body.less

html, body {
	height: 100%;
}

body {
  font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
  overflow-y: scroll;
}

content.less

#content {
	padding-left: @sidebar_width;
	width: 100%;
	height: 100%;
	position: relative;
	@media @sm {
		padding-left: 0px;
	}
	#title {
		width: 100%;
		height: 50px;
		background: @title_bg;
		border-bottom: 1px solid darken(@title_bg, 5%);
		font-size: 15px;
		margin-bottom: 15px;
		span.toggle {
			display: none;
			padding-right: 20px;
			&:hover {
				cursor: pointer;
			}
			@media @sm {
				display: inline-block !important;
			}
		}
		div {
			margin-right: 15px;
		}
		.text {
			margin: 15px;
		}
		a.btn, button {
			margin: 10px;
		}
		.icon {
			display: inline-block;
			width: 20px;
			text-align: left;
			a {
				display: block;
				padding: 4px 8px;
				font-size: 28px;
				color: @color;
				&:hover {
					color: darken(@color, 10%);
				}
				&.green { color: #27ae60; }
				&.amber { color: #e67e22; }
				&.red { color: #c0392b; }
			}
		}
		.dropdown-menu {
			width: 250px;
		}
	}
	#breadcrumb {
		font-size: 13px;
		padding: 8px;
		background-color: darken(@title_bg, 3%);
		a:hover {
			text-decoration: none;
		}
		a:after {
			content: ' > ';
		}
		a:last-child:after {
			content: '';
		}
	}
	#body {
		.calendar {
			position: absolute;
			z-index: 1030;
			right: 85px;
			top: 40px;
		}
		@media @xs {
			.calendar {
				right: 30px;
			}
		}
		.row {
			margin-left: 0;
			margin-right: 0;
		}
		.panel {
			border-radius: 0;
			position: relative;
			.panel-heading {
				> button, .btn-group button {
					padding: 0 10px;
					margin-left: 10px;
				}
				.dropdown-menu {
					font-size: 11px;
					padding: 4px 0;
					margin-top: 5px;
					min-width: 130px;
				}
				.live {
					display: inline-block;
					color: #c0392b;
					margin-left: 10px;
				}
				input {
					display: inline-block;
					width: 170px;
					height: 20px;
					font-size: 10px;
				}
				ul.dropdown-menu {
					a {
						&.disabled {
							opacity: .3;
						}
						&.disabled:hover {
							background: transparent;
							cursor: default;
						}
					}
				}
			}
			.panel-footer {
				ul {
					margin: 0;
				}
			}
		}
		table {
			a { 
				display: block;
			}
			i {
				font-size: 18px;
			}
		}
	}
}

layout.jade

doctype html
html(ng-app='app')
	head
		title= My App
		meta(http-equiv='X-UA-Compatible', content='IE=edge,chrome=1')
		meta(name='viewport', content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0')
		link(rel='stylesheet', href='/bower_components/bootstrap-css-only/css/bootstrap.min.css')
		link(rel='stylesheet', href='/bower_components/ionicons/css/ionicons.min.css')
		link(rel='stylesheet', href='/stylesheets/style.css')
		script(src='/scripts/output.js')
		script(src='/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js')
	body
		#sidebar(ng-controller='SidebarCtrl', ng-class='{active: toggle}')
			#profile
				img(src= '/images/logo.png')
				i(class='close-menu visible-xs icon ion-android-close', ng-click='sidebar()')
			ul#menu
				li: a(href='/', ng-class='{active: isActive("/")}')
					i(class='icon ion-ios-analytics')
					| Item
				li: a(href='/link1', ng-class='{active: isActive("link1")}')
					i(class='icon ion-pie-graph')
					| Item
				li: a(href='/link2', ng-class='{active: isActive("link2")}')
					i(class='icon ion-pinpoint')
					| Item
				li: a(href='/link3', ng-class='{active: isActive("link3")}')
					i(class='icon ion-location')
					| Item
		#content
			#title
				div.pull-left.text(ng-controller='SidebarCtrl', ng-click='sidebar()')
					span.toggle.visible-xs
						i(class='icon ion-android-menu')
					block title
				div.pull-right
					button.btn.btn-warning.btn-sm
						| Button
			#body
				block content

media.less

@xxs: ~'only screen and (max-width: 321px)';
@xs:  ~'only screen and (max-width: 481px)';
@sm:  ~'only screen and (max-width: 769px)';
@md:  ~'only screen and (max-width: 993px)';
@lg:  ~'only screen and (max-width: 1200px)';

sidebar-ctrl.js

exports.inject = function(app) {
    app.controller('SidebarCtrl', ['$scope', '$rootScope', exports.controller]);
    return exports.controller;
};

exports.controller = function($scope, $rootScope) {

    $rootScope.toggle = false;

    $scope.sidebar = function() {
        $rootScope.toggle = !$rootScope.toggle;
    };

    $scope.isActive = function(viewLocation) {
        var url = window.location.pathname;
        url = url.substr(4, url.length).split('/');
        url = url[1];
        url == '' || ! angular.isDefined(url) ? url = '/' : null;

        var path = viewLocation.split('/');
        path[0] == '' ? path = '/' : path = path[0];
        
        return path == url;
    };
};

sidebar.less

#sidebar {
	width: @sidebar_width;
	z-index: 999;
	background: @sidebar_bg;
	float: left;
	height: 100%;
	position: fixed;
	@media @sm {
		display: none;
		&.active {
			display: block;
			position: absolute;
		}
	}
	#profile {
		text-align: center;
		@media @sm {
			text-align: left;
		}
		img {
			width: 140px;
			padding: 5px;
		}
		.close-menu {
			position: relative;
			font-size: 25px;
			top: -9px;
			right: -15px;
			padding: 20px;
			&:hover {
				cursor: pointer;
			}
			@media @sm {
				display: inline-block !important;
			}
		}
	}
	ul#menu {
		font-size: 14px;
		list-style: none;
		margin: 0;
		padding: 0;
		a {
			color: #ffffff;
			padding: 10px 10px;
			display: block;
			&:hover {
				text-decoration: none;
			}
			&.active {
				color: @color;
				background: #ffffff;
				border-right: transparent;
			}
			i {
				padding-right: 10px;
				text-align: center;
				display: inline-block;
				width: 30px;
			}
		}
		li.sub-menu {
			position: relative;
			ul {
				height: 100%;
				display: none;
				position: absolute;
				left: @sidebar_width;
				bottom: 0;
				list-style: none;
				padding: 0;
				min-width: 200px;
				background: darken(@sidebar_bg, 5%);
				border-top-right-radius: 5px;
				border-bottom-right-radius: 5px;
				.title {
					color: #ffffff;
					text-align: center;
					padding: 10px;
					border-bottom: 1px solid @sidebar_bg;
					font-size: 13px;
				}
				li {
					font-size: 12px;
				}
			}
			&:hover {
				background: darken(@sidebar_bg, 10%);
				ul {
					display: block;
				}
			}
		}
	}
}

variables.less

@sidebar_bg: #2980b9;
@sidebar_border: #DBDEDF;
@sidebar_width: 210px;
@color: #333333;
@title_bg: #fafafa;