woot slide menu

less/header.less

@@ -28,7 +28,7 @@
 		width: auto;
 	}
 
-	@media (max-width: @screen-sm-max) {
+	@media (max-width: @screen-xs-max) {
 		.forum-logo {
 			margin-left: 15px;
 		}

less/persona.less

@@ -16,6 +16,9 @@
 @import "outgoing";
 @import "footer";
 
+
+@import "slide-menu";
+
 @import "helpers";
 @import "keyframes";
 @import "rtl";

less/slide-menu.less

@@ -0,0 +1,47 @@
+@media (max-width: @screen-xs-max) {
+	#header-menu #nav-dropdown.navbar-slide-in {
+		width: 45%;
+		background: @gray-dark;
+		right: -45%;
+		min-height: 1000px;
+		position: fixed;
+		margin-top: -50px;
+		padding-left: 15px;
+		box-shadow: inset 2px 0px 12px black;
+		top: 0px;
+
+		a, a:hover, a:focus, a:active {
+			color: @gray-lighter;
+		}
+
+		> ul {
+			overflow: hidden;
+			
+			> li {
+				.transition(.40s ease-in-out transform);
+				transform: translate3d(-50px, 0, 0);
+			}
+		}
+	}
+
+	#header-menu .navbar-nav>.active>a,
+	#header-menu .navbar-nav>.active>a:hover,
+	#header-menu .navbar-nav>.active>a:focus {
+		background: none;
+	}
+
+
+	body {
+		.transition(.40s ease-in-out transform);
+
+		&.slide-in {
+			transform: translate3d(-45%, 0, 0);
+
+			#header-menu #nav-dropdown.navbar-slide-in > ul > li {
+				transform: translate3d(0, 0, 0);
+			}
+		}
+
+		
+	}
+}

lib/persona.js

@@ -0,0 +1,23 @@
+"use strict";
+
+$(document).ready(function() {
+	setupSlideMenu();
+
+	function setupSlideMenu() {
+		$('[data-toggle="slide-in"]').on('click', function(ev) {
+			$('body').toggleClass('slide-in');
+
+			if ($('body').hasClass('slide-in')) {
+				var top = ($('html').scrollTop() || $('body').scrollTop()) + $('header-menu').height()
+
+				$('#header-menu').css('transform', 'translate3d(0, ' + top + 'px, 0)');
+				$('html').css('overflow-y', 'hidden');
+			} else {
+				$('body').one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function() {
+					$('#header-menu').css('transform', 'none');
+					$('html').css('overflow-y', 'scroll');
+				});
+			}
+		});
+	}
+});

plugin.json

@@ -0,0 +1,7 @@
+{
+	"id": "nodebb-theme-persona",
+	"hooks": [],
+	"scripts": [
+		"lib/persona.js"
+	]
+}

templates/partials/menu.tpl

@@ -1,5 +1,5 @@
 			<div class="navbar-header">
-				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+				<button type="button" class="navbar-toggle" data-toggle="slide-in" data-target=".navbar-slide-in">
 					<span class="icon-bar"></span>
 					<span class="icon-bar"></span>
 					<span class="icon-bar"></span>
@@ -19,7 +19,7 @@
 				</div>
 			</div>
 
-			<div class="navbar-collapse collapse" id="nav-dropdown">
+			<div class="navbar-slide-in" id="nav-dropdown">
 				<!-- IF !maintenanceHeader -->
 				<ul id="main-nav" class="nav navbar-nav">
 					<!-- BEGIN navigation -->