mirror of
https://github.com/Icinga/icingaweb2.git
synced 2025-07-27 07:44:04 +02:00
Allow to collapse/expand the sidebar via a toggle button at the bottom of the sidebar
This commit is contained in:
parent
807fbdb131
commit
147587da90
@ -14,3 +14,7 @@ if ($searchDashboard->search('dummy')->getPane('search')->hasDashlets()): ?>
|
|||||||
</form>
|
</form>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
<?= $menuRenderer->setCssClass('primary-nav')->setElementTag('nav')->setHeading(t('Navigation')); ?>
|
<?= $menuRenderer->setCssClass('primary-nav')->setElementTag('nav')->setHeading(t('Navigation')); ?>
|
||||||
|
<button id="toggle-sidebar" title="<?= $this->translate('Toggle Menu') ?>">
|
||||||
|
<i id="close-sidebar" class="icon-angle-double-left"></i>
|
||||||
|
<i id="open-sidebar" class="icon-angle-double-right"></i>
|
||||||
|
</button>
|
||||||
|
@ -235,3 +235,60 @@ html.no-js .controls > .tabs {
|
|||||||
#sidebar {
|
#sidebar {
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Collpased sidebar
|
||||||
|
#layout.sidebar-collapsed {
|
||||||
|
#header-logo {
|
||||||
|
background-image: url('../img/icinga-logo-compact.svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
#main {
|
||||||
|
left: 3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar {
|
||||||
|
width: 3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#open-sidebar {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
|
||||||
|
#close-sidebar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menu {
|
||||||
|
.badge {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
img.icon {
|
||||||
|
margin: 0 1.25em -.25em 0.25em;
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-level-1 > .nav-item i {
|
||||||
|
font-size: 1.5em;
|
||||||
|
margin-right: .5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input {
|
||||||
|
font-size: 1.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-reset {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skip-links {
|
||||||
|
a, button {
|
||||||
|
width: 20em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -14,29 +14,43 @@
|
|||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
#menu a {
|
#layout:not(.minimal-layout) #menu {
|
||||||
&:focus {
|
padding-bottom: 2.25em;
|
||||||
color: @icinga-blue;
|
|
||||||
outline-offset: -3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: @icinga-blue;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#menu .active > a {
|
|
||||||
color: @icinga-blue;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#menu .nav-item {
|
#menu .nav-item {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
|
||||||
> a {
|
> a {
|
||||||
overflow: hidden;
|
&:focus {
|
||||||
text-overflow: ellipsis;
|
color: @icinga-blue;
|
||||||
|
outline: -3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: @icinga-blue;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
> a {
|
||||||
|
color: @icinga-blue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#layout:not(.sidebar-collapsed) #menu .nav-item > a {
|
||||||
|
// Respect overflowing content
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
#layout.sidebar-collapsed #menu .nav-level-1 > .nav-item > a {
|
||||||
|
// Clip overflowing content
|
||||||
|
overflow: hidden;
|
||||||
|
width: 4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
#menu .nav-level-1 > .nav-item {
|
#menu .nav-level-1 > .nav-item {
|
||||||
@ -48,11 +62,6 @@
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-level-2 > li {
|
|
||||||
// Expand menu if active
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
background-color: @body-bg-color;
|
background-color: @body-bg-color;
|
||||||
border-color: @icinga-blue;
|
border-color: @icinga-blue;
|
||||||
}
|
}
|
||||||
@ -87,6 +96,17 @@
|
|||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#layout:not(.sidebar-collapsed) {
|
||||||
|
#menu .nav-level-1 > .nav-item {
|
||||||
|
&.active {
|
||||||
|
.nav-level-2 > li {
|
||||||
|
// Expand menu if active
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
#menu img.icon {
|
#menu img.icon {
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
margin: 0 0.2em;
|
margin: 0 0.2em;
|
||||||
@ -122,6 +142,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Hovered menu
|
// Hovered menu
|
||||||
|
#layout.sidebar-collapsed #menu .nav-level-1 > .nav-item:hover,
|
||||||
#menu .nav-level-1 > .nav-item:not(.active):hover {
|
#menu .nav-level-1 > .nav-item:not(.active):hover {
|
||||||
> .nav-level-2 {
|
> .nav-level-2 {
|
||||||
&:before {
|
&:before {
|
||||||
@ -138,8 +159,6 @@
|
|||||||
color: @text-color-inverted;
|
color: @text-color-inverted;
|
||||||
padding: @vertical-padding 0;
|
padding: @vertical-padding 0;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
margin-left: 15.583em;
|
|
||||||
margin-top: -3.2em;
|
|
||||||
width: 14em;
|
width: 14em;
|
||||||
|
|
||||||
> .nav-item {
|
> .nav-item {
|
||||||
@ -158,6 +177,22 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#menu .nav-level-1 > .nav-item:not(.active):hover {
|
||||||
|
> .nav-level-2 {
|
||||||
|
// Position relative to parent
|
||||||
|
margin-left: 15.583em;
|
||||||
|
margin-top: -3.167em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#layout.sidebar-collapsed #menu .nav-level-1 > .nav-item:hover {
|
||||||
|
> .nav-level-2 {
|
||||||
|
// Position relative to parent
|
||||||
|
margin-left: 3.583em;
|
||||||
|
margin-top: -3.333em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Accessibility skip links
|
// Accessibility skip links
|
||||||
.skip-links {
|
.skip-links {
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -259,3 +294,38 @@ input[type=text].search-input {
|
|||||||
transform: none;
|
transform: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Toggle sidebar button
|
||||||
|
#toggle-sidebar {
|
||||||
|
// Reset button styles
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
color: @gray-light;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
|
||||||
|
i {
|
||||||
|
background: @body-bg-color;
|
||||||
|
border-radius: .25em 0 0 .25em;
|
||||||
|
font-size: 1.5em;
|
||||||
|
width: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
i {
|
||||||
|
color: @icinga-blue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#layout.minimal-layout #toggle-sidebar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#open-sidebar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
@ -12,6 +12,7 @@
|
|||||||
this.on('click', '#menu tr[href]', this.linkClicked, this);
|
this.on('click', '#menu tr[href]', this.linkClicked, this);
|
||||||
this.on('rendered', '#menu', this.onRendered, this);
|
this.on('rendered', '#menu', this.onRendered, this);
|
||||||
this.on('mouseenter', '#menu .nav-level-1 > .nav-item', this.fixFlyoutPosition, this);
|
this.on('mouseenter', '#menu .nav-level-1 > .nav-item', this.fixFlyoutPosition, this);
|
||||||
|
this.on('click', '#toggle-sidebar', this.toggleSidebar, this);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The DOM-Path of the active item
|
* The DOM-Path of the active item
|
||||||
@ -219,6 +220,16 @@
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Collapse or expand sidebar
|
||||||
|
*
|
||||||
|
* @param {Object} e Event
|
||||||
|
*/
|
||||||
|
Navigation.prototype.toggleSidebar = function(e) {
|
||||||
|
$('#layout').toggleClass('sidebar-collapsed');
|
||||||
|
$(window).trigger('resize');
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Called when the history changes
|
* Called when the history changes
|
||||||
*
|
*
|
||||||
@ -255,4 +266,4 @@
|
|||||||
|
|
||||||
Icinga.Behaviors.Navigation = Navigation;
|
Icinga.Behaviors.Navigation = Navigation;
|
||||||
|
|
||||||
}) (Icinga, jQuery);
|
})(Icinga, jQuery);
|
||||||
|
Loading…
x
Reference in New Issue
Block a user