mobile menu JS first pass

less/mobile.less

@@ -1,11 +1,3 @@
-#mobile-menu {
-	display: none;
-}
-
-@media (max-width: 1200px) {
-
-}
-
 @media (max-width: 980px) {
 	body {
 		height: 100%;
@@ -36,29 +28,6 @@
 		}
 	}
 
-	#mobile-menu {
-		width: 31px;
-		background: none;
-		border: none;
-		vertical-align: 10%;
-		margin-right: 10px;
-		margin-left: -15px;
-		outline: none !important;
-		display: block;
-
-		position: absolute;
-		top: 22px;
-		left: 22px;
-
-		.bar {
-			width: 100%;
-			height: 2px;
-			background: #fff;
-			margin-bottom: 3px;
-			border-radius: 10px;
-		}
-	}
-
 	#menu {
 		background-color: #1D1F20;
 		background-image: linear-gradient(145deg, #1D1F20, #404348);

lib/persona.js

@@ -7,6 +7,7 @@ $(document).ready(function() {
 	setupTaskbar();
 	setupEditedByIcon();
 	setupPaginator();
+	setupMobileMenu();
 
 	var env = utils.findBootstrapEnvironment();
 
@@ -156,4 +157,43 @@ $(document).ready(function() {
 
 		$(window).on('action:posts.loading', appendPageNumber);
 	}
+
+	function setupMobileMenu() {
+		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'
+			});
+		});
+	}
 });

templates/partials/menu.tpl

@@ -1,5 +1,5 @@
 			<div class="navbar-header">
-				<button type="button" class="navbar-toggle">
+				<button type="button" class="navbar-toggle" id="mobile-menu">
 					<span class="notification-icon fa fa-fw fa-bell-o" data-content="0"></span>
 					<span class="icon-bar"></span>
 					<span class="icon-bar"></span>