mobile menu for ACP first pass

public/less/admin/mobile.less

@@ -8,7 +8,33 @@
 
 @media (max-width: 980px) {
 	body {
-		padding-top: 90px;
+		//padding-top: 90px;
+		height: 100%;
+	}
+
+	.header {
+		height: 58px;
+		box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.26);
+		position: fixed;
+		top: 0px;
+		z-index: 1;
+
+		#main-page-title {
+			bottom: -31px;
+			font-size: 20px;
+			color: #FFF;
+			left: 52px;
+			font-weight: 400;
+		}
+
+		#user_label {
+			right: 0px;
+			bottom: 7px;
+		}
+
+		#main-menu {
+			display: none;
+		}
 	}
 
 	#mobile-menu {
@@ -34,31 +60,60 @@
 		}
 	}
 
-	.header {
-		height: 58px;
-		box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.26);
-		position: fixed;
-		top: 0px;
-		z-index: 1;
+	#menu {
+		background-color: #1D1F20;
+		background-image: linear-gradient(145deg, #1D1F20, #404348);
 
-		#main-page-title {
-			bottom: -31px;
-			font-size: 20px;
-			color: #FFF;
-			left: 52px;
+		a {
+			color: #fff;
+			text-decoration: none;
+		}
+
+		a:hover {
+			text-decoration: underline;
+		}
+	}
+
+	.menu-header-title {
 		font-weight: 400;
+		letter-spacing: 0.5px;
+		margin: 0;
 	}
 
-		#user_label {
-			right: 0px;
-			bottom: 7px;
+	.menu-section {
+		margin: 25px 0;
 	}
 
-		#main-menu {
-			display: none;
+	.menu-section-title {
+		text-transform: uppercase;
+		color: #85888d;
+		font-weight: 200;
+		font-size: 13px;
+		letter-spacing: 1px;
+		padding: 0 20px;
+		margin:0;
+	}
+
+	.menu-section-list {
+		padding:0;
+		margin: 10px 0;
+		list-style:none;
+
+		a {
+			display: block;
+			padding: 10px 20px;
+		}
+
+		a:hover {
+			background-color: rgba(255, 255, 255, 0.1);
+			text-decoration: none;
 		}
 	}
 
+	#panel {
+		background: white;
+		min-height: 100%;
+	}
 
 	.slideout-menu {
 		position: fixed;

public/src/admin/admin.js

@@ -22,6 +22,8 @@
 
 		$('[component="logout"]').on('click', app.logout);
 		app.alert = launchSnackbar;
+
+		configureSlidemenu();
 	});
 
 	socket.emit('admin.config.get', function(err, config) {
@@ -113,4 +115,43 @@
 			bar.on('click', clickfn);
 		}
 	}
+
+	function configureSlidemenu() {
+		var slideout = new Slideout({
+			'panel': document.getElementById('panel'),
+			'menu': document.getElementById('menu'),
+			'padding': 256,
+			'tolerance': 70
+		});
+
+		$('#mobile-menu').on('click', function() {
+			slideout.toggle();
+		});
+
+		$('#menu a').on('click', function() {
+			slideout.close();
+		});
+
+		$(window).on('resize', function() {
+			slideout.close();
+		});
+
+		function onOpeningMenu() {
+			$('#header').css({
+				'top': $('#panel').position().top * -1 + 'px',
+				'position': 'absolute'
+			});
+		}
+
+		slideout.on('beforeopen', onOpeningMenu);
+		slideout.on('open', onOpeningMenu);
+		slideout.on('translate', onOpeningMenu);
+
+		slideout.on('close', function() {
+			$('#header').css({
+				'top': '0px',
+				'position': 'fixed'
+			});
+		});
+	}
 }());

src/views/admin/footer.tpl

@@ -1,4 +1,4 @@
-
+			</div>
 		</div>
 	</div>
 

src/views/admin/partials/menu.tpl

@@ -1,3 +1,23 @@
+<nav id="menu" class="visible-xs visible-sm">
+	<section class="menu-section">
+		<h3 class="menu-section-title">General</h3>
+		<ul class="menu-section-list">
+			<li><a href="{relative_path}/admin/general/homepage">Home Page</a></li>
+			<li><a href="{relative_path}/admin/general/navigation">Navigation</a></li>
+			<li><a href="{relative_path}/admin/general/languages">Languages</a></li>
+			<li><a href="{relative_path}/admin/general/sounds">Sounds</a></li>
+		</ul>
+	</section>
+
+	<section class="menu-section">
+		<h3 class="menu-section-title">Product</h3>
+		<ul class="menu-section-list">
+			
+		</ul>
+	</section>
+</nav>
+
+<main id="panel">
 	<nav class="header">
 		<div class="pull-left">
 			<button id="mobile-menu">