part2 of mobile sidebar menu. still disabled for now going to come back to this later.

public/css/style.less

@@ -648,3 +648,15 @@ body .navbar .nodebb-inline-block {
 
 	}
 }
+
+
+
+
+#mobile-sidebar {
+	height: 100%;
+	position: absolute;
+	left: 100%;
+	top: 0px;
+	overflow: hidden;
+	margin-top: 60px;
+}

public/src/app.js

@@ -249,14 +249,55 @@ var socket,
 
 	
 	function addTouchEvents() {
+		return; // later.
+
+
+		// click simulation just for testing/sanity purposes.
+
 		var el = jQuery("#content"),
+			sidebar = jQuery('#mobile-sidebar'),
 			width = el.width();
 
-		el.on('touchmove', function(e) {
-			//this.style.marginLeft = - parseInt(width - event.touches[0].pageX) + 'px';
+		function onTouchMove(ev) {
+			var coordinates = window.event ? window.event.touches[0] : ev.touches[0];
+
+			el.css({
+				marginLeft: -parseInt(width - coordinates.pageX) + 'px',
+				paddingRight: parseInt(width - coordinates.pageX) + 'px'});
+
+			sidebar.css({
+				marginLeft: -parseInt(width - coordinates.pageX) + 'px',
+				width: parseInt(width - coordinates.pageX) + 'px'
 			});
-		el.on('touchend', function(e) {
-			this.style.marginLeft = 'auto';
-		})
+		}
+
+		function onMouseMove(ev) {
+			ev.touches = [{pageX: ev.pageX, pageY: ev.pageY}];
+			onTouchMove(ev);
+		}
+
+		function onTouchEnd() {
+			el.css({
+				marginLeft: '0px',
+				paddingRight: '0px'
+			});
+
+			sidebar.css({
+				marginLeft: '0px',
+				width: '0px'
+			});
+		}
+
+		el.on('touchmove', onTouchMove);
+		el.on('mousedown', function() {
+			el.on('mousemove', onMouseMove);
+		});
+
+		el.on('touchend', onTouchEnd);
+		el.on('mouseup', function() {
+			el.off('mousemove');
+			onTouchEnd();
+		});
+		
 	}
 }());

public/templates/category.tpl

@@ -45,7 +45,7 @@
 		<hr />
 		<button id="new_post" class="btn btn-primary btn-large {show_category_features}">New Topic</button>
 	</div>
-	<div class="span3 {show_category_features} category-sidebar">
+	<div class="span3 {show_category_features} category-sidebar mobile-sidebar">
 		<div class="sidebar-block img-polaroid">
 			<div class="block-header">
 				<a target="_blank" href="../{category_id}.rss"><i class="icon-rss-sign icon-2x"></i></a>&nbsp;

public/templates/footer.tpl

@@ -1,6 +1,10 @@
 
 
 	</div><!--END container -->
+
+	<div id="mobile-sidebar">
+	</div>
+
 	<!-- START Forum Info -->
 	<div id="footer" class="container hidden-phone" style="padding-top: 50px; display: none">
 		<div class="alert alert-info">