ui: Fix sidebar issues in minimal layout

Was completely broken even prior the removal of `ui.fixControls()`..

application/layouts/scripts/body.phtml

@@ -42,8 +42,11 @@ if ($this->layout()->inlineLayout) {
                     'id'                => 'header-logo'
                 )
             ); ?>
+            <div id="mobile-menu-toggle">
+                <button type="button"><?= $this->icon('menu') ?><?= $this->icon('cancel') ?></button>
+            </div>
         </div>
-      <?= $this->render('parts/navigation.phtml'); ?>
+        <?= $this->render('parts/navigation.phtml'); ?>
     </div>
     <?php endif ?>
     <div id="main" role="main">

public/css/icinga/responsive.less

@@ -61,17 +61,37 @@
   }
 }
 
+#layout:not(.minimal-layout) {
+  #mobile-menu-toggle {
+    display: none;
+  }
+}
+
 #layout.minimal-layout {
-  #main {
+  #sidebar {
-    left: 0;
+    width: 100%;
   }
 
-  #sidebar {
+  #header-logo-container {
-    top: 0 !important;
+    width: auto;
-    height: 32px;
+    height: 2.5em;
-    padding-bottom: 2.5em;
+    padding: 0;
-    width: 100%;
+    background: inherit;
-    z-index: 3;
+  }
+
+  #header-logo {
+    float: left;
+    width: 6em;
+    height: 2em;
+    margin: .25em;
+  }
+
+  #mobile-menu-toggle {
+    float: right;
+  }
+
+  #sidebar:not(.expanded) #menu {
+    display: none;
   }
 
   #menu {

public/js/icinga/ui.js

@@ -44,6 +44,11 @@
             this.enableTimeCounters();
             this.triggerWindowResize();
             this.fadeNotificationsAway();
+
+            $(document).on('click', '#mobile-menu-toggle', this.toggleMobileMenu);
+            $(document).on('keypress', '#search',{ self: this, type: 'key' }, this.closeMobileMenu);
+            $(document).on('mouseleave', '#sidebar', { self: this, type: 'leave' }, this.closeMobileMenu);
+            $(document).on('click', '#sidebar a', { self: this, type: 'navigate' }, this.closeMobileMenu);
         },
 
         fadeNotificationsAway: function() {
@@ -489,28 +494,26 @@
          * @param {object} e Event
          */
         toggleMobileMenu: function(e) {
-            var $sidebar = $('#sidebar');
+            $('#sidebar').toggleClass('expanded');
-            var $target = $(e.target);
-            var href = $target.attr('href');
-            if (href) {
-                if (href !== '#') {
-                    $sidebar.removeClass('expanded');
-                }
-            } else if (! $target.is('input')) {
-                $sidebar.toggleClass('expanded');
-            }
         },
 
         /**
-         * Close mobile menu when the enter key was pressed
+         * Close mobile menu when the enter key is pressed during search or the user leaves the sidebar
          *
          * @param {object} e Event
          */
         closeMobileMenu: function(e) {
-            var $search = $('#search');
+            if (e.data.self.currentLayout !== 'minimal') {
-            if (e.which === 13 && $search.is(':focus')) {
+                return;
+            }
+
+            if (e.data.type === 'key') {
+                if (e.which === 13) {
+                    $('#sidebar').removeClass('expanded');
+                    $(e.target)[0].blur();
+                }
+            } else {
                 $('#sidebar').removeClass('expanded');
-                $search[0].blur();
             }
         },