Fixed sidebar jitter by switching to sticky positioning

material/assets/manifest.json

@@ -1,12 +1,12 @@
 {
-  "assets/javascripts/bundle.js": "assets/javascripts/bundle.0f38e514.min.js",
-  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.0f38e514.min.js.map",
-  "assets/javascripts/vendor.js": "assets/javascripts/vendor.d7126665.min.js",
-  "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.d7126665.min.js.map",
+  "assets/javascripts/bundle.js": "assets/javascripts/bundle.37a8e348.min.js",
+  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.37a8e348.min.js.map",
+  "assets/javascripts/vendor.js": "assets/javascripts/vendor.d1e549c9.min.js",
+  "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.d1e549c9.min.js.map",
   "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.58d22e8e.min.js",
   "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.58d22e8e.min.js.map",
-  "assets/stylesheets/main.css": "assets/stylesheets/main.97f5b1b6.min.css",
-  "assets/stylesheets/main.css.map": "assets/stylesheets/main.97f5b1b6.min.css.map",
+  "assets/stylesheets/main.css": "assets/stylesheets/main.91a7bba4.min.css",
+  "assets/stylesheets/main.css.map": "assets/stylesheets/main.91a7bba4.min.css.map",
   "assets/stylesheets/palette.css": "assets/stylesheets/palette.a4b61a0c.min.css",
   "assets/stylesheets/palette.css.map": "assets/stylesheets/palette.a4b61a0c.min.css.map"
 }

material/base.html

@@ -41,7 +41,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.97f5b1b6.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.91a7bba4.min.css' | url }}">
       {% if palette.primary or palette.accent %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.a4b61a0c.min.css' | url }}">
       {% endif %}
@@ -178,8 +178,8 @@
       {% endblock %}
     </div>
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/vendor.d7126665.min.js' | url }}"></script>
-      <script src="{{ 'assets/javascripts/bundle.0f38e514.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/vendor.d1e549c9.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.37a8e348.min.js' | url }}"></script>
       {%- set translations = {} -%}
       {%- for key in [
         "clipboard.copy",

src/assets/javascripts/components/shared/sidebar/react/index.ts

@@ -43,10 +43,8 @@ import { Main } from "../../../main"
 import { Sidebar } from "../_"
 import {
   resetSidebarHeight,
-  resetSidebarLock,
   resetSidebarOffset,
   setSidebarHeight,
-  setSidebarLock,
   setSidebarOffset
 } from "../set"
 
@@ -131,7 +129,6 @@ export function applySidebar(
     withLatestFrom(header$),
     tap(([{ height, lock }, { height: offset }]) => {
       setSidebarHeight(el, height)
-      setSidebarLock(el, lock)
 
       /* Set offset in locked state depending on header height */
       if (lock)
@@ -147,7 +144,6 @@ export function applySidebar(
     finalize(() => {
       resetSidebarOffset(el)
       resetSidebarHeight(el)
-      resetSidebarLock(el)
     })
   )
 }

src/assets/javascripts/components/shared/sidebar/set/index.ts

@@ -71,28 +71,3 @@ export function resetSidebarHeight(
 ): void {
   el.style.height = ""
 }
-
-/* ------------------------------------------------------------------------- */
-
-/**
- * Set sidebar lock
- *
- * @param el - Sidebar element
- * @param value - Whether the sidebar is locked
- */
-export function setSidebarLock(
-  el: HTMLElement, value: boolean
-): void {
-  el.setAttribute("data-md-state", value ? "lock" : "")
-}
-
-/**
- * Reset sidebar lock
- *
- * @param el - Sidebar element
- */
-export function resetSidebarLock(
-  el: HTMLElement
-): void {
-  el.removeAttribute("data-md-state")
-}

src/assets/stylesheets/layout/_base.scss

@@ -122,6 +122,7 @@ hr {
 
   // Increase top spacing of content area to give typography more room
   &__inner {
+    display: flex;
     height: 100%;
     margin-top: px2rem(24px + 6px);
   }

src/assets/stylesheets/layout/_content.scss

@@ -26,27 +26,7 @@
 
 // Content container
 .md-content {
-
-  // [tablet landscape +]: Add space for table of contents
-  @include break-from-device(tablet landscape) {
-    margin-right: px2rem(242px);
-
-    // Adjust for right-to-left languages
-    [dir="rtl"] & {
-      margin-right: initial;
-      margin-left: px2rem(242px);
-    }
-  }
-
-  // [screen +]: Add space for table of contents
-  @include break-from-device(screen) {
-    margin-left: px2rem(242px);
-
-    // Adjust for right-to-left languages
-    [dir="rtl"] & {
-      margin-right: px2rem(242px);
-    }
-  }
+  flex: 1;
 
   // Define spacing
   &__inner {

src/assets/stylesheets/layout/_sidebar.scss

@@ -34,7 +34,8 @@ $md-toggle__drawer--checked:
 
 // Sidebar container
 .md-sidebar {
-  position: absolute;
+  position: sticky;
+  top: px2rem(48px);
   width: px2rem(242px);
   padding: px2rem(24px) 0;
   overflow: hidden;
@@ -44,12 +45,6 @@ $md-toggle__drawer--checked:
     display: none;
   }
 
-  // Lock sidebar to container height (account for fixed header)
-  &[data-md-state="lock"] {
-    position: fixed;
-    top: px2rem(48px);
-  }
-
   // [tablet -]: Convert navigation to drawer
   @include break-to-device(tablet) {
 
@@ -95,34 +90,17 @@ $md-toggle__drawer--checked:
   // Secondary sidebar with table of contents
   &--secondary {
     display: none;
+    order: 2;
 
     // [tablet landscape +]: Show table of contents next to body copy
     @include break-from-device(tablet landscape) {
       display: block;
-      margin-left: calc(100% - #{px2rem(242px)});
-
-      // Adjust for right-to-left languages
-      [dir="rtl"] & {
-        margin-right: calc(100% - #{px2rem(242px)});
-        margin-left: initial;
-      }
 
       // Ensure smooth scrolling on iOS
       .md-sidebar__scrollwrap {
         touch-action: pan-y;
       }
     }
-
-    // [screen +]: Limit to grid
-    @include break-from-device(screen) {
-      margin-left: px2rem((1220 - 242) * 1px);
-
-      // Adjust for right-to-left languages
-      [dir="rtl"] & {
-        margin-right: px2rem((1220 - 242) * 1px);
-        margin-left: initial;
-      }
-    }
   }
 
   // Wrapper for scrolling on overflow