AdminLTE - Free admin dashboard template based on Bootstrap 5
fix(scss): pin sidebar sticky when using fixed-header (#6020)
The .fixed-header rule only made .app-header sticky, leaving the
sidebar (and its branding) to scroll with the page. As @dfsmania noted
on the issue, v3 handled this better.
Adds a companion rule that pins .app-sidebar sticky whenever
.fixed-header is active, on sidebar-expand-* breakpoints. The mobile
sidebar is left alone since it handles its own positioning as an
off-canvas overlay.
.fixed-header {
.app-header { /* existing */ }
@each $breakpoint in map-keys($grid-breakpoints) { ...
&.sidebar-expand#{$infix} {
@include media-breakpoint-up($next) {
.app-sidebar {
position: sticky;
top: 0;
max-height: 100vh;
.sidebar-wrapper {
height: subtract(100vh, add($lte-app-header-height, 1px));
overflow-x: hidden;
overflow-y: auto;
}
}
}
}
}
}
The sidebar menu gets its own scrollbar if it overflows. Combining
fixed-header with layout-fixed continues to work -- the rules don't
conflict. A
Aigars Silkalns committed
e1892ef3cced64d019c0d14fc30655f1a11d6828
Parent: dba190a