mobileMenu module (categories menu), fixed bug I made in account.js when moving code to their own files,

public/css/style.less

@@ -35,6 +35,10 @@ body {
 		padding-top: 70px;
 	}
 
+	@media (max-width: 979px)
+	{
+		padding-bottom: 50px;
+	}
 }
 
 .none {
@@ -522,3 +526,120 @@ body .navbar .nodebb-inline-block {
 		position: static;
 	}
 }
+
+
+#mobile-menu {
+	position: fixed;
+	bottom: 0px;
+	height: 50px;
+	background: #333;
+	width: 100%;
+	left: 0px;
+}
+
+#mobile-menu, #mobile-menu-overlay {
+	@media (min-width: 979px) 
+	{
+		display: none !important;
+	}
+}
+
+
+.btn-none,
+.btn-none:active,
+.btn-none[disabled] {
+  background-color: transparent;
+  background-image: none;
+  -webkit-box-shadow: none;
+     -moz-box-shadow: none;
+          box-shadow: none;
+}
+
+.btn-none {
+  cursor: pointer;
+  border-color: transparent;
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+}
+
+.btn-none:hover,
+.btn-none:focus {
+  text-decoration: none;
+  background-color: transparent;
+}
+
+.btn-none[disabled]:hover,
+.btn-none[disabled]:focus {
+  text-decoration: none;
+}
+
+.btn-none {
+	.icon-white {
+		color: white;
+	}
+}
+
+#mobile-menu {
+	#mobile-menu-btn {
+		color: #eee;
+		padding: 10px;
+		text-shadow: none;
+	}
+}
+
+#mobile-menu-overlay {
+	display: none;
+
+	background: rgba(0, 0, 0, 0.85);
+	position: fixed;
+	top: 0px;
+	left: 0px;
+	height: 100%;
+	width: 100%;
+	//margin-top: 50px;
+	padding-top: 20px;
+	opacity: 0;
+
+	-webkit-transition: opacity 150ms ease;
+	-moz-transition: opacity 150ms ease;
+	-ms-transition: opacity 150ms ease;
+	-o-transition: opacity 150ms ease;
+	transition: opacity 150ms ease;
+
+	&.menu-visible {
+		display: block;
+		opacity: 1;
+	}
+
+	.mobile-menu-icon {
+		color: white;
+		width: 20%;
+		min-width: 85px;
+		height: auto;
+		text-align: center;
+		padding: 10px;
+		display: inline-block;
+		cursor: pointer;
+		-webkit-tap-highlight-color: rgba(0,0,0,0);
+
+		-webkit-transition: margin-top 250ms ease;
+		-moz-transition: margin-top 250ms ease;
+		-ms-transition: margin-top 250ms ease;
+		-o-transition: margin-top 250ms ease;
+		transition: margin-top 250ms ease;
+
+		margin-top: 20%;
+		opacity: 0;
+
+		&.menu-visible {
+			margin-top: 0%;
+			opacity: 1;
+		}
+
+		i {
+			width: 100%;
+		}
+
+	}
+}

public/src/forum/account.js

@@ -1,8 +1,7 @@
 (function() {
 	var yourid = templates.get('yourid'),
-		theirid = templates.get('theirid');
+		theirid = templates.get('theirid'),
-		
+        isFriend = templates.get('isFriend');
-	var isFriend = {isFriend};
 
     $(document).ready(function() {
 

public/src/forum/footer.js

@@ -13,7 +13,7 @@
 	socket.emit('user.latest', {});
 	socket.on('user.latest', function(data) {
 		if (data.username == '') {
-			latest_user.innerHTML = '';
+			latest_user.innerHTML = '';y
 		} else {
 			latest_user.innerHTML = "The most recent user to register is <b><a href='/users/"+data.username+"'>" + data.username + "</a></b>.";
 		}
@@ -112,4 +112,9 @@
 		document.querySelector('.notifications a i').className = 'icon-circle active';
 	});
 	socket.emit('api:notifications.counts');
+
+
+	require(['mobileMenu'], function(mobileMenu) {
+		mobileMenu.init();
+	});
 }());

public/src/modules/mobileMenu.js

@@ -0,0 +1,81 @@
+define(function() {
+	var mobileMenu = {};
+
+
+	var categories = null,
+		overlay = null,
+		menuBtn = null;
+
+
+	function loadCategories(callback) {
+		if (categories) {
+			displayCategories();
+			return;
+		}
+
+		jQuery.getJSON('/api/home', function(data) {
+			categories = data.categories;
+			displayCategories();
+		});
+	}
+
+
+	function displayCategories() {
+		var baseIcon = document.createElement('a'),
+			baseImage = document.createElement('i'),
+			baseName = document.createElement('span');
+
+		baseIcon.className = 'mobile-menu-icon';
+
+		for (var i=0, ii=categories.length; i<ii; i++) {
+			var icon = baseIcon.cloneNode(true),
+				image = baseImage.cloneNode(true),
+				name = baseName.cloneNode(true);
+
+			var category = categories[i];
+
+			image.className = category.icon + ' icon-3x';
+			name.innerHTML = '<br />' + category.name;
+			icon.appendChild(image);
+			icon.appendChild(name);
+			icon.src = 'category/' + category.slug;
+
+			icon.onclick = function() {
+				jQuery(overlay).toggleClass('menu-visible');
+
+				setTimeout(function() {
+					jQuery('.mobile-menu-icon').toggleClass('menu-visible');
+				}, 200);
+
+				ajaxify.go(this.src);
+			}
+
+			overlay.appendChild(icon);
+		}
+	}
+
+
+	function animateIcons() {
+		jQuery(overlay).toggleClass('menu-visible');
+		setTimeout(function() {
+			jQuery('.mobile-menu-icon').toggleClass('menu-visible');
+		}, 100);
+	}
+
+
+	mobileMenu.init = function() {
+		overlay = overlay || document.getElementById('mobile-menu-overlay');
+		menuBtn = menuBtn || document.getElementById('mobile-menu-btn');
+		
+		menuBtn.onclick = function() {
+			animateIcons();
+		}
+
+
+		loadCategories(displayCategories);
+	}
+
+	return {
+		init: mobileMenu.init
+	}
+});

public/templates/account.tpl

@@ -74,5 +74,6 @@
 
 <input type="hidden" template-variable="yourid" value="{yourid}" />
 <input type="hidden" template-variable="theirid" value="{theirid}" />
+<input type="hidden" template-variable="isFriend" value="{isFriend}" />
 
 <script type="text/javascript" src="/src/forum/account.js"></script>

public/templates/footer.tpl

@@ -11,6 +11,9 @@
 		<footer class="footer">Copyright &copy; 2013 <a target="_blank" href="http://www.nodebb.com">NodeBB</a> by <a target="_blank" href="https://github.com/psychobunny">psychobunny</a>, <a href="https://github.com/julianlam" target="_blank">julianlam</a>, <a href="https://github.com/barisusakli" target="_blank">barisusakli</a> from <a target="_blank" href="http://www.designcreateplay.com">designcreateplay</a></footer>
 	</div>
 
+	<div id="mobile-menu">
+		<button id="mobile-menu-btn" type="button" class="btn btn-none"><i class="icon-th icon-2x"></i></button>
+	</div>
 	<script type="text/javascript" src="/src/forum/footer.js"></script>
 	<!-- END Forum Info -->
 </body>

public/templates/header.tpl

@@ -29,7 +29,9 @@
 </head>
 
 <body>
-	<div class="navbar navbar-inverse navbar-fixed-top">
+	<div id="mobile-menu-overlay">
+	</div>
+	<div class="navbar navbar-inverse navbar-fixed-top" id="header-menu">
 		<div class="navbar-inner">
 			<div class="container">
 				<a class="brand" href="/">NodeBB</a>