Started on dashboard styling and implementation

app/assets/js/start.js

@@ -2,4 +2,8 @@ $(function() {
 
     $('.tabs').tabs({active: 2});
 
+    $('#sidebar-toggle').click(function() {
+    	$('.sidebar').toggleClass('active');
+    });
+
 });

app/assets/sass/main.scss

@@ -1,3 +1,7 @@
-body {
-	background: #f5f5f5;
-}
+html, body {
+	height: 100%;
+}
+
+@import "partials/base";
+@import "partials/header";
+@import "partials/sidebar";

app/assets/sass/partials/_base.scss

@@ -0,0 +1,30 @@
+$base-background-color: #f5f5f5;
+
+$base-font-family: "Helvetica Neue", Helvetica, "Open Sans", sans-serif;
+$base-font-weight: lighter;
+$base-letter-spacing: 1px;
+
+$base-link-color: #ffffff;
+$base-link-hover-color: #e9e9e9;
+
+$header-background-color: #263238;
+$header-border-color: 1px solid #182024;
+
+$sidebar-background-color: #37474f;
+$sidebar-border-color: 1px solid rgba(255, 255, 255, .1);
+$sidebar-text-color: #d7dadc;
+$sidebar-text-active-color: #ffffff;
+
+$screen-xs-max: "(max-width: 549px)";
+$screen-sm-min: "(min-width: 550px)";
+$screen-sm-max: "(max-width: 991px)";
+$screen-md-min: "(min-width: 992px)";
+$screen-md-max: "(max-width: 1199px)";
+$screen-lg-min: "(min-width: 1200px)";
+
+body {		
+	font-family: $base-font-family;
+	font-weight: $base-font-weight;
+	letter-spacing: $base-letter-spacing;
+	background: $base-background-color;
+}

app/assets/sass/partials/_header.scss

@@ -0,0 +1,45 @@
+body.dashboard {
+	.navbar {
+		z-index: 999;
+		border-radius: 0px;
+		border: none;
+		border-bottom: $header-border-color;
+		background: $header-background-color;
+		margin: 0;
+		a, a:active, a:visited {
+			color: $base-link-color;
+			&:hover {
+				color: $base-link-hover-color;
+			}
+		}
+		.navbar-toggle {
+			margin-top: 15px;
+			background: transparent;
+			border-color: transparent;
+			&.collapsed span {
+				background-color: $base-link-color;
+			}
+		}
+		.navbar-collapse {
+			background: $header-background-color;
+		}
+		a.navbar-brand {
+			padding: 34px 21px;
+			line-height: 0px;
+			font-size: 20px;
+			@media #{$screen-sm-max} {
+				span {
+					padding-right: 10px;
+					&:before {
+						font-family: FontAwesome;
+						content: "\f060";
+					}
+				}
+			}
+		}
+		.nav li a {
+			height: 68px;
+			line-height: 35px;
+		}
+	}
+}

app/assets/sass/partials/_sidebar.scss

@@ -0,0 +1,66 @@
+body.dashboard {
+	.sidebar {
+		width: 250px;
+		height: 100%;
+		background: $sidebar-background-color;
+		margin-top: -69px;
+		padding-top: 69px;
+		transition: margin .2s;
+		@media #{$screen-sm-max} {
+			width: 30%;
+			margin-left: -30%;
+		}
+		@media #{$screen-xs-max} {
+			width: 75%;
+			margin-left: -75%;
+		}
+		&.active {
+			margin-left: 0;
+		}
+		.profile {
+			padding: 20px;
+			margin-bottom: 20px;
+			.avatar {
+				width: 70px;
+				img {
+					border-radius: 50%;
+					width: 60px;
+				}
+			}
+			.profile {
+				color: $sidebar-text-color;
+			}
+		}
+		ul {
+			clear: both;
+			margin: 0;
+			padding: 0;
+			list-style: none;
+			
+			li {
+				font-size: 14px;
+				&:last-child {
+					border-bottom: $sidebar-border-color;
+				}
+				&.active {
+					background: $header-background-color;
+					a {
+						color: $sidebar-text-active-color;
+					}
+				}
+				a {
+					display: block;
+					padding: 15px;
+					border-top: $sidebar-border-color;
+					color: $sidebar-text-color;
+					i {
+						padding-right: 10px;
+					}
+					&:hover {
+						text-decoration: none;
+					}
+				}			
+			}
+		}
+	}
+}