fix invisible nav items if there is a second nav in content

pull/3867/head
REJack 2021-07-29 19:33:58 +02:00
parent 2c4d879d64
commit 52ff423787
4 changed files with 84 additions and 84 deletions

View File

@ -62,7 +62,7 @@
}
}
.nav.flex-column {
.nav.flex-column:not(.nav-sidebar) {
> li {
border-bottom: 1px solid $card-border-color;
margin: 0;

View File

@ -14,7 +14,6 @@
outline: none;
}
}
}
.sidebar {
@ -201,7 +200,7 @@
}
}
.sidebar-is-opening .nav-sidebar {
.sidebar-is-opening .sidebar .nav-sidebar {
.nav-link p {
animation-name: fadeIn;
animation-duration: $transition-speed;
@ -400,7 +399,7 @@
// Hover and active states
&.menu-open > .nav-link,
&:hover > .nav-link,
> .nav-link:focus {
> .nav-link:focus {
background-color: $sidebar-dark-hover-bg;
color: $sidebar-dark-hover-color;
}
@ -575,7 +574,7 @@
}
}
.sidebar-collapse &.nav-child-indent {
.sidebar-collapse &.nav-child-indent .sidebar {
.nav-treeview {
.nav-icon {
margin-left: .55rem;
@ -731,39 +730,38 @@
.nav-icon {
@include transition(margin-left $transition-fn $transition-speed);
margin-left: .6rem;
}
}
}
.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused &.nav-child-indent,
.sidebar-mini.sidebar-collapse .main-sidebar:hover &.nav-child-indent,
.sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused &.nav-child-indent,
.sidebar-mini-md.sidebar-collapse .main-sidebar:hover &.nav-child-indent,
.sidebar-mini-xs.sidebar-collapse .main-sidebar.sidebar-focused &.nav-child-indent,
.sidebar-mini-xs.sidebar-collapse .main-sidebar:hover &.nav-child-indent {
.nav-treeview {
padding-left: 1rem;
.nav-treeview {
padding-left: 2rem;
margin-left: -1rem;
}
}
}
.sidebar-mini.sidebar-collapse.text-sm .main-sidebar.sidebar-focused &.nav-child-indent,
.sidebar-mini.sidebar-collapse.text-sm .main-sidebar:hover &.nav-child-indent,
.sidebar-mini-md.sidebar-collapse.text-sm .main-sidebar.sidebar-focused &.nav-child-indent,
.sidebar-mini-md.sidebar-collapse.text-sm .main-sidebar:hover &.nav-child-indent,
.sidebar-mini-xs.sidebar-collapse.text-sm .main-sidebar.sidebar-focused &.nav-child-indent,
.sidebar-mini-xs.sidebar-collapse.text-sm .main-sidebar:hover &.nav-child-indent {
.nav-treeview {
padding-left: .5rem;
.sidebar-mini.sidebar-collapse,
.sidebar-mini-md.sidebar-collapse,
.sidebar-mini-xs.sidebar-collapse {
.main-sidebar.sidebar-focused &.nav-child-indent,
.main-sidebar:hover &.nav-child-indent {
.nav-treeview {
padding-left: 1rem;
margin-left: -.5rem;
.nav-treeview {
padding-left: 2rem;
margin-left: -1rem;
}
}
}
}
.sidebar-mini.sidebar-collapse.text-sm,
.sidebar-mini-md.sidebar-collapse.text-sm,
.sidebar-mini-xs.sidebar-collapse.text-sm {
.main-sidebar.sidebar-focused &.nav-child-indent,
.main-sidebar:hover &.nav-child-indent {
.nav-treeview {
padding-left: .5rem;
.nav-treeview {
padding-left: 1rem;
margin-left: -.5rem;
}
}
}
}
@ -771,40 +769,41 @@
.sidebar-mini.sidebar-collapse &,
.sidebar-mini-md.sidebar-collapse &,
.sidebar-mini-xs.sidebar-collapse & {
> .nav-item > .nav-link {
.nav-icon {
margin-left: .55rem;
}
&.active {
> .nav-icon{
margin-left: .36rem;
.sidebar {
> .nav-item > .nav-link {
.nav-icon {
margin-left: .55rem;
}
&.active {
> .nav-icon {
margin-left: .36rem;
}
}
}
}
&.nav-child-indent {
.nav-treeview {
&.nav-child-indent {
.nav-treeview {
padding-left: 0;
margin-left: 0;
.nav-treeview {
padding-left: 0;
margin-left: 0;
}
}
}
}
}
.sidebar-mini.sidebar-collapse.text-sm &,
.sidebar-mini-md.sidebar-collapse.text-sm &,
.sidebar-mini-xs.sidebar-collapse.text-sm & {
> .nav-item > .nav-link {
.nav-icon {
margin-left: .75rem;
}
.sidebar {
> .nav-item > .nav-link {
.nav-icon {
margin-left: .75rem;
}
&.active {
> .nav-icon{
margin-left: calc(.75rem - 3px);
&.active {
> .nav-icon {
margin-left: calc(.75rem - 3px);
}
}
}
}
@ -855,7 +854,6 @@
}
}
.nav-collapse-hide-child {
.menu-open > .nav-treeview {
max-height: min-content;
@ -864,7 +862,7 @@
animation-fill-mode: both;
}
.sidebar-collapse & {
.sidebar-collapse .sidebar & {
.menu-open > .nav-treeview {
max-height: 0;
animation-name: fadeOut;
@ -873,17 +871,17 @@
}
}
.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused &,
.sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover &,
.sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused &,
.sidebar-mini-md.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover &,
.sidebar-mini-xs.sidebar-collapse .main-sidebar.sidebar-focused &,
.sidebar-mini-xs.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover & {
.menu-open > .nav-treeview {
max-height: min-content;
animation-name: fadeIn;
animation-duration: $transition-speed;
animation-fill-mode: both;
.sidebar-mini.sidebar-collapse,
.sidebar-mini-md.sidebar-collapse,
.sidebar-mini-xs.sidebar-collapse {
.main-sidebar.sidebar-focused &,
.main-sidebar:not(.sidebar-no-expand):hover & {
.menu-open > .nav-treeview {
max-height: min-content;
animation-name: fadeIn;
animation-duration: $transition-speed;
animation-fill-mode: both;
}
}
}
}
@ -1136,7 +1134,7 @@
padding: $sidebar-custom-padding-x $sidebar-custom-padding-y;
}
height: fill-available;
height: stretch;
}
.main-sidebar-custom-lg {
@ -1169,7 +1167,7 @@
}
}
@include dark-mode () {
@include dark-mode() {
@each $name, $color in $theme-colors-alt {
.sidebar-dark-#{$name},
.sidebar-light-#{$name} {

View File

@ -451,19 +451,21 @@
padding-left: 0;
}
.brand-text,
.user-panel > .info,
.nav-sidebar .nav-link p {
margin-left: -10px;
animation-name: fadeOut;
animation-duration: $transition-speed;
animation-fill-mode: both;
visibility: hidden;
width: 0;
}
.sidebar {
.brand-text,
.user-panel > .info,
.nav-sidebar .nav-link p {
margin-left: -10px;
animation-name: fadeOut;
animation-duration: $transition-speed;
animation-fill-mode: both;
visibility: hidden;
width: 0;
}
.nav-sidebar > .nav-item .nav-icon {
margin-right: 0;
.nav-sidebar > .nav-item .nav-icon {
margin-right: 0;
}
}
}
}

View File

@ -45,13 +45,13 @@
display: none;
}
.nav-sidebar .nav-link p {
.sidebar .nav-sidebar .nav-link p {
width: 0;
white-space: nowrap;
}
.sidebar .user-panel > .info,
.nav-sidebar .nav-link p,
.sidebar .nav-sidebar .nav-link p,
.brand-text {
margin-left: -10px;
animation-name: fadeOut;
@ -109,7 +109,7 @@
}
.user-panel > .info,
.nav-sidebar .nav-link p,
.sidebar .nav-sidebar .nav-link p,
.brand-text,
.logo-xl {
display: inline-block;