From 9e0bee5006d0a92566e390b29eaa5c4a9e8f6aac Mon Sep 17 00:00:00 2001
From: Florian Strohmaier <hello@florianstrohmaier.com>
Date: Wed, 9 Mar 2016 13:45:26 +0100
Subject: [PATCH] Fix mispositioned mobile menu icon

fixes #11099
---
 public/css/icinga/layout.less | 17 ++++++++++++++++-
 public/js/icinga/ui.js        | 21 ++++++++++-----------
 2 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/public/css/icinga/layout.less b/public/css/icinga/layout.less
index 9b155b9c1..ca090326e 100644
--- a/public/css/icinga/layout.less
+++ b/public/css/icinga/layout.less
@@ -76,7 +76,6 @@
 @gutter: 1em;
 
 // x-column-layout
-
 #main {
   .clearfix();
 
@@ -109,6 +108,22 @@
   }
 }
 
+// Mobile menu
+#mobile-menu-toggle {
+  text-align: right;
+
+  > button {
+    background: none;
+    border: none;
+    height: 2.5em;
+
+    -webkit-appearance: none;
+       -moz-appearance: none;
+        -ms-appearance: none;
+            appearance: none;
+  }
+}
+
 #sidebar {
   background-color: @gray-lighter;
 }
diff --git a/public/js/icinga/ui.js b/public/js/icinga/ui.js
index 09876e954..c5c90860e 100644
--- a/public/js/icinga/ui.js
+++ b/public/js/icinga/ui.js
@@ -587,7 +587,7 @@
                 });
 
                 if ($layout.hasClass('minimal-layout')) {
-                    if (! this.mobileMenu) {
+                    if (! this.mobileMenu && $sidebar.length) {
                         $header.css({
                             top: $sidebar.outerHeight() + 'px'
                         });
@@ -599,19 +599,18 @@
                             zIndex: 2
                         });
                         $sidebar
+                            .on(
+                                'click',
+                                this.toggleMobileMenu
+                            )
+                            .prepend(
+                                $('<div id="mobile-menu-toggle"><button><i class="icon-menu"></i></button></div>')
+                            )
                             .css({
-                                paddingBottom: 32,
+                                paddingBottom: $('#mobile-menu-toggle').height(),
                                 top: 0,
                                 zIndex: 3
-                            })
-                            .on('click', this.toggleMobileMenu)
-                            .prepend(
-                                $('<i id="mobile-menu-toggle" class="icon-menu"></i>').css({
-                                    cursor: 'pointer',
-                                    display: 'block',
-                                    height: '32px'
-                                })
-                            );
+                            });
                         $search.on('keypress', this.closeMobileMenu);
 
                         this.mobileMenu = true;