Reduce flyout menu JS complexity

public/css/icinga/layout.less

@@ -226,3 +226,12 @@ html.no-js .controls > .tabs {
     background-color: @color-notification-warning;
   }
 }
+
+// Z-Index correction
+#main {
+  z-index: 1;
+}
+
+#sidebar {
+  z-index: 2;
+}

public/css/icinga/menu.less

@@ -30,6 +30,15 @@
   color: @icinga-blue;
 }
 
+#menu .nav-item {
+  vertical-align: middle;
+
+  > a {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
 #menu .nav-level-1 > .nav-item {
   border-left: 5px solid transparent;
   line-height: 2.167em; // 26 px
@@ -104,7 +113,6 @@
 }
 
 // Badge offset correction
-
 #menu > nav > .nav-level-1 > .badge-nav-item > a > .badge {
   margin-top: 0.2em;
 }
@@ -114,26 +122,24 @@
 }
 
 // Hovered menu
-
+#menu .nav-level-1 > .nav-item:not(.active):hover {
-#menu .nav-level-1 > .nav-item.hover {
-  position: relative;
-
-  &:before {
-    border: 0.5em solid rgba(0, 0, 0, 0);
-    border-right-color: @text-color;
-    content: "";
-    position: absolute;
-    right: 0;
-    top: 30%;
-  }
-
   > .nav-level-2 {
+    &:before {
+      border: 0.5em solid rgba(0, 0, 0, 0);
+      border-right-color: @text-color;
+      content: "";
+      width: 1em;
+      position: fixed;
+      margin-left: -1em;
+      margin-top: 0.5em;
+    }
+
     background-color: @text-color;
     color: @text-color-inverted;
-    left: 100%;
     padding: @vertical-padding 0;
-    position: absolute;
+    position: fixed;
-    top: 0;
+    margin-left: 15.583em;
+    margin-top: -3.2em;
     width: 14em;
 
     > .nav-item {
@@ -152,20 +158,6 @@
   }
 }
 
-#layout.hoveredmenu {
-  #main {
-    z-index: 2;
-  }
-
-  #sidebar {
-    z-index: 3;
-  }
-
-  #menu {
-    overflow: visible;
-  }
-}
-
 // Accessibility skip links
 .skip-links {
   position: relative;

public/css/icinga/responsive.less

@@ -106,6 +106,16 @@
 #layout.twocols #col2 {
   border-left: 1px solid @gray-lighter;
   display: block;
+
+  > .controls > .tabs:before {
+    background-color: @icinga-blue;
+    content: "";
+    display: block;
+    height: 3em;
+    margin-left: -1px;
+    width: 1px;
+    position: fixed;
+  }
 }
 
 #layout.twocols > #main > .container {

public/js/icinga/behavior/navigation.js

@@ -10,9 +10,8 @@
         Icinga.EventListener.call(this, icinga);
         this.on('click', '#menu a', this.linkClicked, this);
         this.on('click', '#menu tr[href]', this.linkClicked, this);
-        this.on('mouseenter', '#menu > nav > ul > li', this.menuTitleHovered, this);
-        this.on('mouseleave', '#sidebar', this.leaveSidebar, this);
         this.on('rendered', '#menu', this.onRendered, this);
+        this.on('mouseenter', '#menu .nav-level-1 > .nav-item', this.fixFlyoutPosition, this);
 
         /**
          * The DOM-Path of the active item
@@ -23,15 +22,6 @@
          */
         this.active = null;
 
-        /**
-         * The DOM-Path of the hovered item
-         *
-         * @see getDomPath
-         *
-         * @type {null|Array}
-         */
-        this.hovered = null;
-
         /**
          * The menu
          *
@@ -39,6 +29,7 @@
          */
         this.$menu = null;
     };
+
     Navigation.prototype = new Icinga.EventListener();
 
     /**
@@ -71,7 +62,7 @@
     };
 
     /**
-     * Re-render the menu selection and menu hovering according to the current state
+     * Re-render the menu selection according to the current state
      */
     Navigation.prototype.refresh = function() {
         // restore selection to current active element
@@ -89,14 +80,6 @@
                 $el.html($el.html());
             }
         }
-
-        // restore hovered menu to current hovered element
-        if (this.hovered) {
-            var hovered = this.icinga.utils.getElementByDomPath(this.hovered);
-            if (hovered) {
-                this.hoverElement($(hovered));
-            }
-        }
     };
 
     /**
@@ -107,26 +90,13 @@
     Navigation.prototype.linkClicked = function(event) {
         var $a = $(this);
         var href = $a.attr('href');
-        var $li;
         var _this = event.data.self;
         var icinga = _this.icinga;
 
-        _this.hovered = null;
         if (href.match(/#/)) {
             // ...it may be a menu section without a dedicated link.
             // Switch the active menu item:
             _this.setActive($a);
-            $li = $a.closest('li');
-            if ($li.hasClass('hover')) {
-                $li.removeClass('hover');
-            }
-            if (href === '#') {
-                // Allow to access dropdown menu by keyboard
-                if ($a.hasClass('dropdown-toggle')) {
-                    $a.closest('li').toggleClass('hover');
-                }
-                return;
-            }
         } else {
             _this.setActive($(event.target));
         }
@@ -233,6 +203,22 @@
         this.active = null;
     };
 
+    /**
+     * Fix top position of the flyout menu
+     *
+     * @param e
+     */
+    Navigation.prototype.fixFlyoutPosition = function(e) {
+        var $target = $(this);
+        var $flyout = $target.find('.nav-level-2');
+
+        if ($flyout.length) {
+            $flyout.css({
+                top: $target.position().top - parseInt($flyout.css('margin-top'), 10)
+            });
+        }
+    };
+
     /**
      * Called when the history changes
      *
@@ -267,87 +253,6 @@
         return this.active;
     };
 
-    Navigation.prototype.menuTitleHovered = function(event) {
-        if ($('#layout').hasClass('minimal-layout')) {
-            return;
-        }
-
-        var $li = $(this),
-            delay = 800,
-            _this = event.data.self;
-
-        _this.hovered = null;
-        if ($li.hasClass('active')) {
-            $li.siblings().removeClass('hover');
-            return;
-        }
-        if ($li.children('ul').children('li').length === 0) {
-            return;
-        }
-        if ($('#menu').scrollTop() > 0) {
-            return;
-        }
-
-        if ($('#layout').hasClass('hoveredmenu')) {
-            delay = 0;
-        }
-
-        setTimeout(function () {
-            try {
-                if (!$li.is('li:hover')) {
-                    return;
-                }
-                if ($li.hasClass('active')) {
-                    return;
-                }
-            } catch(e) { /* Bypass because if IE8 */ }
-
-            $li.siblings().each(function () {
-                var $sibling = $(this);
-                try {
-                    if ($sibling.is('li:hover')) {
-                        return;
-                    }
-                } catch(e) { /* Bypass because if IE8 */ };
-                if ($sibling.hasClass('hover')) {
-                    $sibling.removeClass('hover');
-                }
-            });
-            _this.hoverElement($li);
-        }, delay);
-    };
-
-    Navigation.prototype.leaveSidebar = function (event) {
-        var $sidebar = $(this),
-            $li = $sidebar.find('li.hover'),
-            _this = event.data.self;
-        if (! $li.length) {
-            $('#layout').removeClass('hoveredmenu');
-            return;
-        }
-
-        setTimeout(function () {
-            try {
-                if ($li.is('li:hover') || $sidebar.is('sidebar:hover')) {
-                    return;
-                }
-            } catch(e) { /* Bypass because if IE8 */ };
-            $li.removeClass('hover');
-            $('#layout').removeClass('hoveredmenu');
-        }, 500);
-        _this.hovered = null;
-    };
-
-    Navigation.prototype.hoverElement = function ($li)  {
-        $('#layout').addClass('hoveredmenu');
-        $li.addClass('hover');
-        if ($li[0]) {
-            this.hovered = this.icinga.utils.getDomPath($li[0]);
-        } else {
-            this.hovered = null;
-        }
-    };
-
     Icinga.Behaviors.Navigation = Navigation;
 
 }) (Icinga, jQuery);