Skip to content

Commit 68999d6

Browse files
committed
Show label as navigation flyout header
1 parent 6100281 commit 68999d6

File tree

4 files changed

+72
-3
lines changed

4 files changed

+72
-3
lines changed

library/Icinga/Web/Menu.php

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
use Icinga\Application\Logger;
77
use Icinga\Authentication\Auth;
88
use Icinga\Web\Navigation\Navigation;
9+
use Icinga\Web\Navigation\Renderer\RecursiveMenuNavigationRenderer;
910

1011
/**
1112
* Main menu for Icinga Web 2
@@ -149,4 +150,14 @@ public function init()
149150
]));
150151
}
151152
}
153+
154+
/**
155+
* Create and return the renderer for this navigation
156+
*
157+
* @return RecursiveMenuNavigationRenderer
158+
*/
159+
public function getRenderer()
160+
{
161+
return new RecursiveMenuNavigationRenderer($this);
162+
}
152163
}
Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<?php
2+
/* Icinga Web 2 | (c) 2025 Icinga GmbH | GPLv2+ */
3+
4+
namespace Icinga\Web\Navigation\Renderer;
5+
6+
use Icinga\Web\Navigation\NavigationItem;
7+
8+
/**
9+
* Renderer for the multi level navigation in the sidebar menu
10+
*/
11+
class RecursiveMenuNavigationRenderer extends RecursiveNavigationRenderer
12+
{
13+
public function beginChildren(): void
14+
{
15+
parent::beginChildren();
16+
17+
$parentItem = $this->getInnerIterator()->current()->getParent();
18+
$item = new NavigationItem($parentItem->getName());
19+
$item->setLabel($parentItem->getLabel());
20+
$item->setCssClass('nav-item-header');
21+
22+
$renderer = new NavigationItemRenderer();
23+
$renderer->setEscapeLabel(false);
24+
$content = $renderer->render($item);
25+
26+
$this->content[] = $this->getInnerIterator()->beginItemMarkup($item);
27+
$this->content[] = $content;
28+
$this->content[] = $this->getInnerIterator()->endItemMarkup();
29+
}
30+
}

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,10 @@
44
namespace Icinga\Web\Navigation\Renderer;
55

66
use Exception;
7-
use RecursiveIteratorIterator;
87
use Icinga\Exception\IcingaException;
98
use Icinga\Web\Navigation\Navigation;
109
use Icinga\Web\Navigation\NavigationItem;
11-
use Icinga\Web\Navigation\Renderer\NavigationItemRenderer;
10+
use RecursiveIteratorIterator;
1211

1312
/**
1413
* Renderer for multi level navigation

public/css/icinga/menu.less

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -246,6 +246,10 @@
246246
margin-right: .5em
247247
}
248248

249+
#layout:not(.sidebar-collapsed) #menu .nav-level-1 > .nav-item:not(.active).hover > .nav-level-2 {
250+
padding-top: @vertical-padding;
251+
}
252+
249253
// Hovered menu
250254
#layout:not(.minimal-layout).sidebar-collapsed #menu .nav-level-1 > .nav-item.hover,
251255
#layout:not(.minimal-layout) #menu .nav-level-1 > .nav-item:not(.active).hover {
@@ -255,7 +259,7 @@
255259
border-color: @gray-light;
256260
border-radius: .25em;
257261
box-shadow: 0 0 1em 0 rgba(0,0,0,.3);
258-
padding: @vertical-padding 0;
262+
padding-bottom: @vertical-padding;
259263
width: 14em;
260264
position: fixed;
261265
z-index: 1;
@@ -520,6 +524,27 @@ html.no-js #toggle-sidebar {
520524
margin-right: 0;
521525
}
522526

527+
#layout.sidebar-collapsed #menu .nav-level-1 > .nav-item.hover .nav-level-2 > .nav-item-header {
528+
background-color: @menu-bg-color;
529+
border-bottom: 1px solid @gray-light;
530+
border-top-left-radius: .25em;
531+
border-top-right-radius: .25em;
532+
533+
span {
534+
padding-left: 1.375em;
535+
height: @nav-item-height;
536+
display: flex;
537+
align-items: center;
538+
539+
font-weight: @font-weight-bold;
540+
.text-ellipsis();
541+
542+
> .badge {
543+
display: none;
544+
}
545+
}
546+
}
547+
523548
#layout:not(.sidebar-collapsed) #menu .nav-level-1 > .nav-item.active .nav-level-2 > li {
524549
&.nav-item:not(.badge-nav-item) {
525550
&:not(.selected):not(.active) a:hover,
@@ -531,6 +556,10 @@ html.no-js #toggle-sidebar {
531556

532557
#layout:not(.sidebar-collapsed) #menu .nav-level-1 > .nav-item.active .nav-level-2 > li,
533558
#layout:not(.sidebar-collapsed) #menu .nav-level-1 > .nav-item:not(.active).hover .nav-level-2 > li {
559+
&.nav-item-header {
560+
display: none;
561+
}
562+
534563
&.badge-nav-item {
535564
display: flex;
536565
}

0 commit comments

Comments
 (0)