Add menu hover support

public/css/icinga/menu.less

@@ -107,11 +107,80 @@
   box-shadow: none;
 }
 
+/* BEGIN OF Hoverable menu */
+
+#menu li.hover {
+  width: 26em;
+  padding-left: 0.5em;
+  margin-left: 0;
+  margin-right: 0;
+  position: relative;
+}
+
+#menu li.hover > ul {
+  position: absolute;
+  display: block;
+  left: 13em;
+  right: 0;
+  top: -2em;
+  padding-top: 1em;
+  padding-bottom: 0.5em;
+  height: auto;
+  background-color: #333;
+}
+
+#menu li.hover > a {
+  color: white;
+}
+
+#menu li.hover > ul a {
+  width: 100%;
+  display: block;
+  color: white;
+}
+
+#menu li.hover > ul a:hover {
+  text-decoration: underline;
+}
+
+#menu li.hover > ul > li.active > a {
+  font-weight: bold;
+  color: white;
+}
+
+#menu li.hover li {
+  padding: 0;
+}
+
+#menu li.hover > a:after {
+  border: 0.5em solid rgba(0, 0, 0, 0);
+  border-right-color: #333;
+  content: " ";
+  margin-top: 0.8em;
+  pointer-events: none;
+  position: absolute;
+  left: 12em;
+  height: 0;
+  width: 0;
+}
+
+#layout.hoveredmenu {
+  #main {
+    z-index: 2;
+  }
+  #sidebar {
+    z-index: 3;
+  }
+}
+
+/* END of Hoverable menu */
+
+
 #menu input.search {
   margin: 0 0 0 0.5em;
   padding: 0 0.5em 0 2.5em;
   border: none;
-  width: 13em;
+  width: 12.5em;
   border-radius: 0;
   height: 2.5em;
   display: block;
@@ -141,6 +210,7 @@
 #menu input.search.active {
   background-color: white;
   color: #121212;
+  width: 13em;
   text-shadow: none;
   padding-left: 3em;
   margin-left: 0;

public/js/icinga/events.js

@@ -42,7 +42,7 @@
                 }
             });
 
-            var moduleName
+            var moduleName;
             if (moduleName = el.data('icingaModule')) {
                 if (icinga.hasModule(moduleName)) {
                     var module = icinga.module(moduleName);
@@ -103,7 +103,8 @@
             $(document).on('mouseleave', '.historycolorgrid td', this.historycolorgidUnhover);
             $(document).on('mouseenter', 'li.dropdown', this.dropdownHover);
             $(document).on('mouseleave', 'li.dropdown', this.dropdownLeave);
-
+            $(document).on('mouseenter', '#menu > ul > li', this.menuTitleHovered);
+            $(document).on('mouseleave', '#sidebar', this.leaveSidebar);
             $(document).on('click', '.tree .handle', { self: this }, this.treeNodeToggle);
 
 
@@ -113,6 +114,60 @@
             // $(document).on('change', 'form.auto select', this.submitForm);
         },
 
+        menuTitleHovered: function () {
+            var $li = $(this),
+                delay = 800;
+
+            if ($li.hasClass('active')) {
+                return;
+            }
+            if ($li.children('ul').children('li').length === 0) {
+                return;
+            }
+
+            if ($('#layout').hasClass('hoveredmenu')) {
+                delay = 0;
+            }
+
+            setTimeout(function () {
+                if (! $li.is('li:hover')) {
+                    return;
+                }
+                if ($li.hasClass('active')) {
+                    return;
+                }
+
+                $li.siblings().each(function () {
+                    var $sibling = $(this);
+                    if ($sibling.is('li:hover')) {
+                        return;
+                    }
+                    if ($sibling.hasClass('hover')) {
+                        $sibling.removeClass('hover');
+                    }
+                });
+
+                $('#layout').addClass('hoveredmenu');
+                $li.addClass('hover');
+            }, delay);
+        },
+
+        leaveSidebar: function () {
+            var $sidebar = $(this);
+            var $li = $sidebar.find('li.hover');
+            if (! $li.length) {
+                return;
+            }
+
+            setTimeout(function () {
+                if ($li.is('li:hover') || $sidebar.is('sidebar:hover') ) {
+                    return;
+                }
+                $li.removeClass('hover');
+                $('#layout').removeClass('hoveredmenu');
+            }, 800);
+        },
+
         dropdownHover: function () {
             $(this).addClass('hover');
         },