From 583a4985c00df89abeb627e65df3055aa8f3ce93 Mon Sep 17 00:00:00 2001
From: Eric Lippmann <eric.lippmann@netways.de>
Date: Mon, 16 Nov 2015 14:21:08 +0100
Subject: [PATCH] Add mobile menu

fixes #8999
---
 public/css/icinga/layout-structure.less |  4 ++-
 public/css/icinga/menu.less             |  5 ++++
 public/js/icinga/ui.js                  | 37 +++++++++++++++++++++++--
 3 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/public/css/icinga/layout-structure.less b/public/css/icinga/layout-structure.less
index d9c29e3fa..e0c4e394a 100644
--- a/public/css/icinga/layout-structure.less
+++ b/public/css/icinga/layout-structure.less
@@ -256,7 +256,9 @@ html {
 
 #layout.minimal-layout {
   #sidebar {
-    display: none;
+    top: 0;
+    height: 32px;
+    width: 100%;
   }
 
   .dashboard > div.container {
diff --git a/public/css/icinga/menu.less b/public/css/icinga/menu.less
index f975a5f2e..6754251f0 100644
--- a/public/css/icinga/menu.less
+++ b/public/css/icinga/menu.less
@@ -189,3 +189,8 @@
     }
   }
 }
+
+#sidebar.expanded {
+  bottom: 0 !important;
+  height: auto !important;
+}
diff --git a/public/js/icinga/ui.js b/public/js/icinga/ui.js
index 916265a4b..48b842638 100644
--- a/public/js/icinga/ui.js
+++ b/public/js/icinga/ui.js
@@ -20,6 +20,8 @@
         this.debugTimer = null;
 
         this.timeCounterTimer = null;
+
+        this.mobileMenu = false;
     };
 
     Icinga.UI.prototype = {
@@ -533,8 +535,39 @@
 
                 if (! $('#layout').hasClass('fullscreen-layout')) {
                     $('#header').css({height: 'auto'});
-                    $('#main').css({top: $('#header').css('height')});
-                    $('#sidebar').css({top: $('#header').height() + 'px'});
+                    if ($('#layout').hasClass('minimal-layout')) {
+                        if (! this.mobileMenu) {
+                            $('#header').css({top: $('#sidebar').height() + 'px'});
+                            $('#main').css({
+                                top: $('#header').height() + $('#sidebar').height()
+                            });
+                            $('#sidebar').css({
+                                zIndex: 2
+                            }).on('click', function (e) {
+                                var $sidebar = $('#sidebar');
+                                var $target = $(e.target);
+                                var href = $target.attr('href');
+                                if (href) {
+                                    if (href !== '#') {
+                                        $sidebar.removeClass('expanded');
+                                    }
+                                } else if (! $target.is('input')) {
+                                    $sidebar.toggleClass('expanded');
+                                }
+                                $('#search').keypress(function(e) {
+                                    if (e.which === 13) {
+                                        $sidebar.removeClass('expanded');
+                                    }
+                                });
+                            }).prepend('<i class="icon-menu" style="vertical-align: middle;"></i>').css({
+                                paddingBottom: 32
+                            });
+                            this.mobileMenu = true;
+                        }
+                    } else {
+                        $('#main').css({top: $('#header').css('height')});
+                        $('#sidebar').css({top: $('#header').height() + 'px'});
+                    }
                     $('#header').css({height: $('#header').height() + 'px'});
                     $('#inner-layout').css({top: $('#header').css('height')});
                 }