Просмотр исходного кода

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.
Aigars Silkalns 1 день назад
Родитель
Сommit
e1892ef3cc
1 измененных файлов с 27 добавлено и 0 удалено
  1. 27 0
      src/scss/_app-header.scss

+ 27 - 0
src/scss/_app-header.scss

@@ -31,4 +31,31 @@
     top: 0;
     z-index: $lte-zindex-fixed-header;
   }
+
+  // Fixes #6020: when only `fixed-header` is used (without `layout-fixed`),
+  // the sidebar — including its branding — used to scroll with the page
+  // because nothing made it sticky. Pin the sidebar so the brand and menu
+  // stay visible while the page content scrolls beneath the fixed header.
+  // Only applied on `sidebar-expand-*` breakpoints, since the mobile sidebar
+  // is an off-canvas overlay that handles its own positioning.
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    $next: breakpoint-next($breakpoint, $grid-breakpoints);
+    $infix: breakpoint-infix($next, $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;
+          }
+        }
+      }
+    }
+  }
 }