SIGN IN SIGN UP
ColorlibHQ / AdminLTE UNCLAIMED

AdminLTE - Free admin dashboard template based on Bootstrap 5

0 0 76 CSS

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