Show label as navigation flyout header

Author: jrauh01

library/Icinga/Web/Menu.php

@@ -6,6 +6,7 @@
 use Icinga\Application\Logger;
 use Icinga\Authentication\Auth;
 use Icinga\Web\Navigation\Navigation;
+use Icinga\Web\Navigation\Renderer\RecursiveMenuNavigationRenderer;
 
 /**
  * Main menu for Icinga Web 2
@@ -149,4 +150,14 @@ public function init()
             ]));
         }
     }
+
+    /**
+     * Create and return the renderer for this navigation
+     *
+     * @return  RecursiveMenuNavigationRenderer
+     */
+    public function getRenderer()
+    {
+        return new RecursiveMenuNavigationRenderer($this);
+    }
 }

library/Icinga/Web/Navigation/Renderer/RecursiveMenuNavigationRenderer.php

@@ -0,0 +1,25 @@
+<?php
+/* Icinga Web 2 | (c) 2025 Icinga GmbH | GPLv2+ */
+
+namespace Icinga\Web\Navigation\Renderer;
+
+use Icinga\Web\Navigation\NavigationItem;
+
+/**
+ * Renderer for the multi level navigation in the sidebar menu
+ */
+class RecursiveMenuNavigationRenderer extends RecursiveNavigationRenderer implements NavigationRendererInterface
+{
+    public function beginChildren(): void
+    {
+        parent::beginChildren();
+
+        $item = new NavigationItem($this->getInnerIterator()->current()->getParent()->getName());
+        $item->setCssClass('nav-item-header');
+        $item->render();
+
+        $this->content[] = $this->getInnerIterator()->beginItemMarkup($item);
+        $this->content[] = $item;
+        $this->content[] = $this->getInnerIterator()->endItemMarkup();
+    }
+}

library/Icinga/Web/Navigation/Renderer/RecursiveNavigationRenderer.php

@@ -4,11 +4,10 @@
 namespace Icinga\Web\Navigation\Renderer;
 
 use Exception;
-use RecursiveIteratorIterator;
 use Icinga\Exception\IcingaException;
 use Icinga\Web\Navigation\Navigation;
 use Icinga\Web\Navigation\NavigationItem;
-use Icinga\Web\Navigation\Renderer\NavigationItemRenderer;
+use RecursiveIteratorIterator;
 
 /**
  * Renderer for multi level navigation

public/css/icinga/menu.less

@@ -241,6 +241,10 @@
   margin-right: .5em
 }
 
+#layout:not(.sidebar-collapsed) #menu .nav-level-1 > .nav-item:not(.active).hover > .nav-level-2 {
+  padding-top: @vertical-padding;
+}
+
 // Hovered menu
 #layout:not(.minimal-layout).sidebar-collapsed #menu .nav-level-1 > .nav-item.hover,
 #layout:not(.minimal-layout) #menu .nav-level-1 > .nav-item:not(.active).hover {
@@ -250,7 +254,7 @@
     border-color: @gray-light;
     border-radius: .25em;
     box-shadow: 0 0 1em 0 rgba(0,0,0,.3);
-    padding: @vertical-padding 0;
+    padding-bottom: @vertical-padding;
     width: 14em;
     position: fixed;
     z-index: 1;
@@ -266,7 +270,7 @@
       height: 1.1em;
       width: 1.1em;
       position: absolute;
-      top: 1em;
+      top: 1.15em;
       left: -.6em;
       z-index: -1;
     }
@@ -514,6 +518,24 @@ html.no-js  #toggle-sidebar {
   margin-right: 0;
 }
 
+#layout.sidebar-collapsed #menu .nav-level-1 > .nav-item.hover .nav-level-2 > .nav-item-header {
+  background-color: @menu-bg-color;
+  border-bottom: 1px solid @gray-light;
+  border-top-left-radius: .25em;
+  border-top-right-radius: .25em;
+
+  span {
+    font-weight: @font-weight-bold;
+    line-height: 2.167em;
+    padding: .5em .5em .5em 1.375em;
+    margin: 0;
+
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+}
+
 #layout:not(.sidebar-collapsed) #menu .nav-level-1 > .nav-item.active .nav-level-2 > li {
   &.nav-item:not(.badge-nav-item) {
     &:not(.selected):not(.active) a:hover,
@@ -525,6 +547,10 @@ html.no-js  #toggle-sidebar {
 
 #layout:not(.sidebar-collapsed) #menu .nav-level-1 > .nav-item.active .nav-level-2 > li,
 #layout:not(.sidebar-collapsed) #menu .nav-level-1 > .nav-item:not(.active).hover .nav-level-2 > li {
+  &.nav-item-header {
+    display: none;
+  }
+
   &.badge-nav-item {
     display: flex;
   }

public/js/icinga/behavior/navigation.js

@@ -319,7 +319,10 @@
             $target.siblings().not($target).removeClass('hover');
             $target.addClass('hover');
 
-            var targetHeight = $target.offset().top + $target.outerHeight();
+            let target = $target[0];
+
+            // Minus 1 to align the elements content not the border
+            var targetHeight = target.offsetTop + target.offsetHeight - 1;
             $flyout.css({
                 bottom: 'auto',
                 top: targetHeight