Improve mobile menu

This commit is contained in:
Florian Strohmaier 2019-05-06 14:49:41 +02:00
parent 7326f527cb
commit 574c76ab42
3 changed files with 25 additions and 2 deletions

View File

@ -46,7 +46,8 @@
margin-top: -3em; margin-top: -3em;
} }
#header-logo { #header-logo,
#mobile-menu-logo {
background-image: url('../img/icinga-logo.svg'); background-image: url('../img/icinga-logo.svg');
background-position: center center; background-position: center center;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -61,6 +62,18 @@
} }
} }
#mobile-menu-logo {
width: 50%;
float: left;
height: 2em;
margin-top: .25em;
background-position: .75em center;
}
#mobile-menu-toggle .icon-cancel {
display: none;
}
#icinga-logo { #icinga-logo {
background-image: url('../img/icinga-logo-big.svg'); background-image: url('../img/icinga-logo-big.svg');
background-position: center bottom; background-position: center bottom;

View File

@ -350,6 +350,14 @@ ul:not(.nav-level-2) > .selected > a {
#sidebar.expanded { #sidebar.expanded {
bottom: 0 !important; bottom: 0 !important;
height: auto !important; height: auto !important;
#mobile-menu-toggle .icon-menu {
display: none;
}
#mobile-menu-toggle .icon-cancel {
display: inline-block;
}
} }
.search-control { .search-control {

View File

@ -629,8 +629,10 @@
this.toggleMobileMenu this.toggleMobileMenu
) )
.prepend( .prepend(
$('<div id="mobile-menu-toggle"><button><i class="icon-menu"></i></button></div>') $('<div id="mobile-menu-toggle"><button><i class="icon-menu"></i><i class="icon-cancel"></i></button></div>')
); );
$('#header-logo').clone().attr('id', 'mobile-menu-logo')
.appendTo('#mobile-menu-toggle');
$(window).on('keypress', this.closeMobileMenu); $(window).on('keypress', this.closeMobileMenu);
this.mobileMenu = true; this.mobileMenu = true;