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,30 @@
+<?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
+{
+    public function beginChildren(): void
+    {
+        parent::beginChildren();
+
+        $parentItem = $this->getInnerIterator()->current()->getParent();
+        $item = new NavigationItem($parentItem->getName());
+        $item->setLabel($parentItem->getLabel());
+        $item->setCssClass('nav-item-header');
+
+        $renderer = new NavigationItemRenderer();
+        $renderer->setEscapeLabel(false);
+        $content = $renderer->render($item);
+
+        $this->content[] = $this->getInnerIterator()->beginItemMarkup($item);
+        $this->content[] = $content;
+        $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

@@ -246,6 +246,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 {
@@ -255,7 +259,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;
@@ -520,6 +524,27 @@ 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 {
+    padding-left: 1.375em;
+    height: @nav-item-height;
+    display: flex;
+    align-items: center;
+
+    font-weight: @font-weight-bold;
+    .text-ellipsis();
+
+    > .badge {
+      display: none;
+    }
+  }
+}
+
 #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,
@@ -531,6 +556,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;
   }