aside bar as menu in mobile

view/theme/vier/mobile.css

@@ -24,7 +24,7 @@ body, section, nav .nav-menu, div.pager, ul.tabs {
 }
 
 nav {
-  min-width: 480px;
+  min-width: 100%;
 }
 
 .wall-item-container .wall-item-content {
@@ -88,3 +88,29 @@ nav ul {
 .wall-item-container.thread_level_7 .wall-item-content {
   max-width: 100%;
 }
+
+/* aside in/out */
+.mobile-aside-toggle {
+	display: block !important;
+}
+.mobile-aside-toggle a {
+	line-height: 35px;
+	padding: 0 10px;
+}
+.mobile-aside-toggle a i {
+	font-size: 22px;
+	color: #CCC;
+}
+
+aside {
+	display: block;
+	position: absolute;
+	max-width: 400px;
+	width: 80%;
+	left: -100%;
+	transition: left 0.5s;
+}
+
+aside.show {
+	left: 0;
+}

view/theme/vier/templates/nav.tpl

@@ -7,6 +7,11 @@
 </header>
 <nav role="menubar">
 	<ul>
+		<li class="mobile-aside-toggle" style="display:none;">
+			<a href="#">
+				<i class="icons icon-list"></i>
+			</a>
+		</li>
 		{{if $nav.home}}
 			<li role="menuitem" id="nav-home-link" class="nav-menu {{$sel.home}}">
 				<a accesskey="p" class="{{$nav.home.2}}" href="{{$nav.home.0}}" title="{{$nav.home.3}}" >{{$nav.home.1}}</a>

view/theme/vier/theme.php

@@ -86,6 +86,14 @@ function cmtBbOpen(id) {
 function cmtBbClose(id) {
 	$("#comment-edit-bb-" + id).hide();
 }
+
+$(document).ready(function() {
+	$(".mobile-aside-toggle a").click(function(e){
+		e.preventDefault();
+		$("aside").toggleClass("show");
+	});
+});
+
 </script>
 EOT;