mirror of
https://github.com/Icinga/icingaweb2.git
synced 2025-07-27 07:44:04 +02:00
Show label as navigation flyout header
This commit is contained in:
parent
6c57d32979
commit
05f9e7c5ee
@ -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);
|
||||
}
|
||||
}
|
||||
|
@ -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();
|
||||
}
|
||||
}
|
@ -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
|
||||
|
@ -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;
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user