// mobile nav

admin-dev/themes/default/config.rb

@@ -5,7 +5,7 @@ sass_dir = "scss"
 images_dir = "img"
 javascripts_dir = "js"
 fonts_dir = "font"
-output_style = :compressed
+output_style = :compact
 environment = :production
 
 # To enable relative paths to assets via compass helper functions. Uncomment:

admin-dev/themes/default/js/admin-theme.js

@@ -100,47 +100,64 @@ $( document ).ready(function() {
 
 	function mobileNav() {
 		//clean actual menu type
-		$('body').removeClass('page-sidebar').removeClass('page-topbar').removeClass('page-sidebar-closed');
+		//$('body').removeClass('page-sidebar').removeClass('page-topbar').removeClass('page-sidebar-closed');
 		// get it in navigation whatever type it is.
 		var navigation = $('#nav-sidebar,#nav-topbar');
 		var submenu = "";
 		// clean trigger
 		navigation.off().attr('id','nav-mobile');
 		$('span.menu-collapse').off();
-		navigation.on('click','span.menu-collapse',function(){
+		navigation.on('click.collapse','span.menu-collapse',function(){
 			if ($(this).hasClass('expanded')){
 				$(this).html('<i class="icon-align-justify"></i>');
 				navigation.find('ul.menu').hide();
+				navigation.removeClass('expanded');
 				$(this).removeClass('expanded');
+				//remove submenu when closing nav
+				$('#nav-mobile-submenu').remove();
 			}
 			else {
 				$(this).html('<i class="icon-remove"></i>');
-				navigation.find('ul.menu').show();
+				navigation.find('ul.menu').removeClass('menu-close').show();
+				navigation.addClass('expanded');
 				$(this).addClass('expanded');
 			}
 		});
 		//get click for item which has submenu
-		navigation.on('click','.maintab.has_submenu a.title', function(e){
+		navigation.on('click.submenu','.maintab.has_submenu a.title', function(e){
 			e.preventDefault();
-			navigation.find('.menu').hide();
+			navigation.find('.menu').addClass('menu-close');
 			$('#nav-mobile-submenu').remove();
 			//create submenu
-			submenu = $('<ul id="nav-mobile-submenu" class="menu"><li><a href="#" id="nav-mobile-submenu-back"><i class="icon-arrow-left"></i> Back</a></li></ul>');
+			submenu = $('<ul id="nav-mobile-submenu" class="menu"><li><a href="#" id="nav-mobile-submenu-back"><i class="icon-arrow-left"></i>'+ $(this).html() +'</a></li></ul>');
 			submenu.append($(this).closest('.maintab').find('.submenu').html());
 			//show submenu
 			navigation.append(submenu);
 			submenu.show();
 		});
-		navigation.on('click','#nav-mobile-submenu-back',function(e){
+		navigation.on('click.back','#nav-mobile-submenu-back',function(e){
 			e.preventDefault();
-			submenu.remove();
+			navigation.find('.menu').removeClass('menu-close').show(submenu.addClass('menu-close'));
-			navigation.find('.menu').show();
 		});
 	}
 
+	function removeMobileNav(){
+		navigation = $('#nav-mobile');
+		$('#nav-mobile-submenu').remove();
+		$('span.menu-collapse').html('<i class="icon-align-justify"></i>');
+		navigation.off();
+		if ($('body').hasClass('page-sidebar')){
+			navigation.attr('id',"nav-sidebar")
+			navSidebar();
+		} else if ($('body').hasClass('page-sidebar')){
+			navigation.attr('id',"nav-topbar")
+			navTopbar();
+		}
+	}
+
 	//nav switch - not used for now
 	function navSwitch(){
-		if ($('body').hasClass('page-sidebar')||$('body').hasClass('page-sidebar-closed')){
+		if ($('body').hasClass('page-sidebar')){
 			navTopbar();
 		} else {
 			navSidebar();
@@ -148,13 +165,16 @@ $( document ).ready(function() {
 	}
 
 	//init menu
-	if ($('body').hasClass('page-sidebar')){
+	function initNav(){
-		navSidebar();
+		if ($('body').hasClass('page-sidebar')){
-	}
+			navSidebar();
-	else if ($('body').hasClass('page-topbar')) {
+		}
-		navTopbar();
+		else if ($('body').hasClass('page-topbar')) {
+			navTopbar();
+		}
 	}
 
+	initNav();
 	//tooltip
 	$('.label-tooltip').tooltip();
 
@@ -192,7 +212,7 @@ $( document ).ready(function() {
 			mobileNav();
 		},
 		unmatch : function() {
-			
+			removeMobileNav();
 		}
 	});
 });

admin-dev/themes/default/scss/admin-theme.sass

@@ -3,12 +3,16 @@
 @import "admin-theme/_bootstrap-variables"
 @import "admin-theme/_bootstrap-init"
 @import "admin-theme/_font-awesome"
+@import "admin-theme/animate"
 
 html, body
 	min-height: 100%
 	height: 100%
 
+#header
+	z-index: 20
 #main
+	z-index: 10
 	float: left
 	width: 100%
 	min-height: 100%

admin-dev/themes/default/scss/admin-theme/_admin-nav.sass

@@ -1,10 +1,13 @@
 #nav-mobile
-	position: absolute
+	position: fixed
-	top: 37px
+	top: 0
 	left: 0
-	width: 50px
+	overflow: hidden
-	height: 50px
+	width: 100%
-	z-index: 500
+	height: 38px
+	z-index: 1100
+	&.expanded
+		height: 100%
 	li > a > i
 		display: inline-block
 		height: 30px
@@ -15,25 +18,26 @@
 		text-align: center
 		background: black
 		@include border-radius(40px)
-	#nav-mobile-submenu
-		z-index: 700
 	ul.menu
-		z-index: 600
+		top: 37px
-		display: none
 		position: absolute
-		top: 54px
+		display: none
-		background: $main-color
 		width: 480px
+		height: 100%
+		background-color: rgba(black,0.8)
 		margin: 0 0 100px 0
 		padding: 0
 		border-top: 1px black solid
 		list-style: none
+		@include transition(all 0.35s ease-out)
+		@include animate(fadeInLeft, 0.3s)
 		li
+			background: $main-color
 			position: relative
 			a
 				display: block
 				position: relative
-				padding: 2px 0 2px 20px
+				padding: 2px 0 2px 10px
 				border-bottom: 1px solid darken($main-color,10%)
 				font-size: 12px
 				line-height: 40px
@@ -59,9 +63,24 @@
 						color: white
 	ul.submenu
 		display: none
+	#nav-mobile-submenu
+		z-index: 1200
+		a:not(#nav-mobile-submenu-back)
+			font-size: 1.2em
+			padding-left: 50px
+			text-transform: none
 	a#nav-mobile-submenu-back
 		background-color: darken($main-color,5%)
-
+		font-size: 1.5em
+	ul.menu.menu-close
+		@include animate(fadeOutLeft, 0.2s)
+	.menu-collapse
+		position: absolute
+		width: 50px
+		height: 37px
+		line-height: 1.3em
+		top: 0
+		right: 0
 
 #nav-sidebar
 	position: fixed
@@ -285,6 +304,7 @@
 		display: none
 
 .menu-collapse
+	cursor: pointer
 	height: 54px
 	width: 100%
 	font-size: 2em
@@ -377,3 +397,4 @@
 
 [class^="icon-Admin"]
 	margin-right: 6px
+