acp main menu themed

public/less/admin/admin.less

@@ -16,6 +16,55 @@
 		font-weight: 700;
 	}
 
+	#main-menu {
+		position: fixed;
+		width: 200px;
+		height: 100%;
+		padding-top: 50px;
+		top: 0px;
+		left: 0px;
+		background: #333;
+		z-index: 1;
+		overflow-y: auto;
+
+		.sidebar-nav {
+			margin-top: 1px;
+
+			.nav-header {
+				color: #fff;
+				border-top: 1px solid #32353E;
+				border-bottom: 1px solid #1A1C20;
+				background-color: #272727;
+				text-shadow: 0px 0px 2px #111;
+				padding: 10px;
+			}
+
+			.nav-list {
+				background: #232323;
+				li {
+					&:hover a {
+						background-color: #2f2f2f;
+					}					
+
+					a {
+						color: white;
+						padding: 7px 15px;
+						font-size: 14px;
+						.transition(.4s ease-in background-color);
+					}
+				}
+			}
+		}
+	}
+
+	#content {
+		padding-left: 207px;
+	}
+
+	.wrapper {
+		width: 100%;
+	}
+
 	.panel {
 		background-color: #FFF;
 		box-sizing: border-box;

src/views/admin/header.tpl

@@ -99,10 +99,9 @@
 		</div>
 	</div>
 
-	<div class="container">
+	<div class="wrapper">
-		<div class="row">
+		<div id="main-menu">
-			<div class="col-sm-3">
+			<div class="sidebar-nav">
-				<div class="well sidebar-nav">
 				<ul class="nav nav-list">
 					<li class="nav-header">NodeBB</li>
 					<li class="active"><a href="{relative_path}/admin/index"><i class="fa fa-fw fa-home"></i> Home</a></li>
@@ -120,7 +119,7 @@
 				</ul>
 			</div>
 			<!-- IF authentication.length -->
-				<div class="well sidebar-nav">
+			<div class="sidebar-nav">
 				<ul class="nav nav-list">
 						<li class="nav-header">Social Authentication</li>
 						<!-- BEGIN authentication -->
@@ -131,7 +130,7 @@
 				</ul>
 			</div>
 			<!-- ENDIF authentication.length -->
-				<div class="well sidebar-nav">
+			<div class="sidebar-nav">
 				<ul class="nav nav-list">
 					<li class="nav-header">Plugins</li>
 					<!-- BEGIN plugins -->
@@ -142,13 +141,12 @@
 				</ul>
 			</div>
 			<!-- IF env -->
-				<div class="well sidebar-nav">
+			<div class="sidebar-nav">
 				<ul class="nav nav-list">
 					<li class="nav-header">Development</li>
 					<li><a href="{relative_path}/admin/logger"><i class="fa fa-fw fa-th"></i> Logger</a></li>
 				</ul>
 			</div>
 			<!-- ENDIF env -->
-			</div><!--/span-->
+		</div>
-
+		<div class="col-sm-12" id="content">
-			<div class="col-sm-9" id="content">