github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

fix(4186): various collapsed sidebar-mini bugs

pull/4209/head
REJack 2022-01-22 22:01:56 +01:00
parent 3831b6252a
commit f88d61cbc6
3 changed files with 48 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
build/scss/_main-sidebar.scss
View File

@ -862,7 +862,7 @@
animation-fill-mode: both; animation-fill-mode: both;
} }
.sidebar-collapse .sidebar & { .sidebar-collapse .sidebar:not(:hover) & {
.menu-open > .nav-treeview { .menu-open > .nav-treeview {
max-height: 0; max-height: 0;
animation-name: fadeOut; animation-name: fadeOut;

7
build/scss/_sidebar-mini.scss
View File

@ -278,9 +278,6 @@
&.sidebar-focused, &.sidebar-focused,
&:hover { &:hover {
.nav-link {
width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2);
}
&:not(.hide-nav-header-on-hover) { &:not(.hide-nav-header-on-hover) {
.nav-header { .nav-header {
display: inline-block; display: inline-block;
@ -289,6 +286,9 @@
// Show sidebar search when hover/focus on the sidebar mini mode. // Show sidebar search when hover/focus on the sidebar mini mode.
&:not(.sidebar-no-expand) { &:not(.sidebar-no-expand) {
.nav-link {
width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2);
}
.form-control-sidebar { .form-control-sidebar {
display: inline-block; display: inline-block;
} }
@ -462,6 +462,7 @@
animation-duration: $transition-speed; animation-duration: $transition-speed;
animation-fill-mode: both; animation-fill-mode: both;
visibility: hidden; visibility: hidden;
display: inline-block;
width: 0; width: 0;
} }

84
build/scss/mixins/_sidebar.scss
View File

@ -92,55 +92,57 @@
} }
} }
&:hover, &:not(.sidebar-no-expand) {
&.sidebar-focused { &:hover,
width: $sidebar-width; &.sidebar-focused {
.brand-link {
width: $sidebar-width; width: $sidebar-width;
}
.user-panel { .brand-link {
text-align: left; width: $sidebar-width;
.image {
float: left;
} }
}
.user-panel > .info, .user-panel {
.sidebar .nav-sidebar .nav-link p, text-align: left;
.brand-text,
.logo-xl {
display: inline-block;
margin-left: 0;
animation-name: fadeIn;
animation-duration: $transition-speed;
animation-fill-mode: both;
visibility: visible;
}
.logo-xs { .image {
animation-name: fadeOut; float: left;
animation-duration: $transition-speed; }
animation-fill-mode: both; }
visibility: hidden;
}
.brand-image { .user-panel > .info,
margin-right: .5rem; .sidebar .nav-sidebar .nav-link p,
} .brand-text,
.logo-xl {
display: inline-block;
margin-left: 0;
animation-name: fadeIn;
animation-duration: $transition-speed;
animation-fill-mode: both;
visibility: visible;
}
// Make the sidebar links, menus, labels, badges .logo-xs {
// and angle icons disappear animation-name: fadeOut;
.sidebar-form, animation-duration: $transition-speed;
.user-panel > .info { animation-fill-mode: both;
display: block !important; visibility: hidden;
transform: translateZ(0); }
}
.nav-sidebar > .nav-item > .nav-link > span { .brand-image {
display: inline-block !important; margin-right: .5rem;
}
// Make the sidebar links, menus, labels, badges
// and angle icons disappear
.sidebar-form,
.user-panel > .info {
display: block !important;
transform: translateZ(0);
}
.nav-sidebar > .nav-item > .nav-link > span {
display: inline-block !important;
}
} }
} }
} }