Merge pull request #3775 from Icinga/bugfix/improve-mobile-menu

Improve mobile menu

public/css/icinga/layout.less

@@ -46,7 +46,8 @@
   margin-top: -3em;
 }
 
-#header-logo {
+#header-logo,
+#mobile-menu-logo {
   background-image: url('../img/icinga-logo.svg');
   background-position: center center;
   background-repeat: no-repeat;
@@ -61,6 +62,18 @@
   }
 }
 
+#mobile-menu-logo {
+  width: 50%;
+  float: left;
+  height: 2em;
+  margin-top: .25em;
+  background-position: .75em center;
+}
+
+#mobile-menu-toggle .icon-cancel {
+  display: none;
+}
+
 #icinga-logo {
   background-image: url('../img/icinga-logo-big.svg');
   background-position: center bottom;

public/css/icinga/menu.less

@@ -350,6 +350,14 @@ ul:not(.nav-level-2) > .selected > a {
 #sidebar.expanded {
   bottom: 0 !important;
   height: auto !important;
+
+  #mobile-menu-toggle .icon-menu {
+    display: none;
+  }
+
+  #mobile-menu-toggle .icon-cancel {
+    display: inline-block;
+  }
 }
 
 .search-control {

public/css/icinga/responsive.less

@@ -74,6 +74,17 @@
     z-index: 3;
   }
 
+  #menu {
+    -webkit-box-shadow: none;
+       -moz-box-shadow: none;
+            box-shadow: none;
+  }
+
+  ul > .selected > a:after,
+  ul > .nav-item.active:after {
+    display: none;
+  }
+
   .dashboard > div.container {
     width: 100%;
   }

public/js/icinga/ui.js

@@ -629,8 +629,10 @@
                                 this.toggleMobileMenu
                             )
                             .prepend(
-                                $('<div id="mobile-menu-toggle"><button><i class="icon-menu"></i></button></div>')
+                                $('<div id="mobile-menu-toggle"><button><i class="icon-menu"></i><i class="icon-cancel"></i></button></div>')
                             );
+                            $('#header-logo').clone().attr('id', 'mobile-menu-logo')
+                                .appendTo('#mobile-menu-toggle');
                         $(window).on('keypress', this.closeMobileMenu);
 
                         this.mobileMenu = true;