Show label as navigation flyout header

This commit is contained in:
Johannes Rauh 2025-04-25 08:19:18 +02:00 committed by Johannes Meyer
parent 6c57d32979
commit 05f9e7c5ee
4 changed files with 72 additions and 3 deletions

View File

@ -6,6 +6,7 @@ namespace Icinga\Web;
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 @@ class Menu extends Navigation
]));
}
}
/**
* Create and return the renderer for this navigation
*
* @return RecursiveMenuNavigationRenderer
*/
public function getRenderer()
{
return new RecursiveMenuNavigationRenderer($this);
}
}

View File

@ -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();
}
}

View File

@ -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

View File

@ -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;
}