Fixed sidebar jitter by switching to sticky positioning

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")
-}