From 341a12c164d2624546acea19a3da4dbb0c117199 Mon Sep 17 00:00:00 2001
From: psychobunny <psycho.bunny@hotmail.com>
Date: Mon, 23 Mar 2015 16:37:59 -0400
Subject: [PATCH] woot slide menu

---
 less/header.less            |  2 +-
 less/persona.less           |  3 +++
 less/slide-menu.less        | 47 +++++++++++++++++++++++++++++++++++++
 lib/persona.js              | 23 ++++++++++++++++++
 plugin.json                 |  7 ++++++
 templates/partials/menu.tpl |  4 ++--
 6 files changed, 83 insertions(+), 3 deletions(-)
 create mode 100644 less/slide-menu.less
 create mode 100644 lib/persona.js
 create mode 100644 plugin.json

diff --git a/less/header.less b/less/header.less
index d966805..e15303e 100644
--- a/less/header.less
+++ b/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;
 		}
diff --git a/less/persona.less b/less/persona.less
index cea88db..184f195 100644
--- a/less/persona.less
+++ b/less/persona.less
@@ -16,6 +16,9 @@
 @import "outgoing";
 @import "footer";
 
+
+@import "slide-menu";
+
 @import "helpers";
 @import "keyframes";
 @import "rtl";
\ No newline at end of file
diff --git a/less/slide-menu.less b/less/slide-menu.less
new file mode 100644
index 0000000..4d9cd3b
--- /dev/null
+++ b/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);
+			}
+		}
+
+		
+	}
+}
\ No newline at end of file
diff --git a/lib/persona.js b/lib/persona.js
new file mode 100644
index 0000000..4c78e98
--- /dev/null
+++ b/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');
+				});
+			}
+		});
+	}
+});
\ No newline at end of file
diff --git a/plugin.json b/plugin.json
new file mode 100644
index 0000000..b43179d
--- /dev/null
+++ b/plugin.json
@@ -0,0 +1,7 @@
+{
+	"id": "nodebb-theme-persona",
+	"hooks": [],
+	"scripts": [
+		"lib/persona.js"
+	]
+}
\ No newline at end of file
diff --git a/templates/partials/menu.tpl b/templates/partials/menu.tpl
index 516fa70..9dbf4c0 100644
--- a/templates/partials/menu.tpl
+++ b/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 -->