Added support for variable sized header

material/assets/manifest.json

@@ -1,6 +1,6 @@
 {
-  "assets/javascripts/bundle.js": "assets/javascripts/bundle.4a3df536.min.js",
+  "assets/javascripts/bundle.js": "assets/javascripts/bundle.7cbaf05d.min.js",
-  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.4a3df536.min.js.map",
+  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.7cbaf05d.min.js.map",
   "assets/javascripts/worker/packer.js": "assets/javascripts/worker/packer.c14659e8.min.js",
   "assets/javascripts/worker/packer.js.map": "assets/javascripts/worker/packer.c14659e8.min.js.map",
   "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.0a5433f7.min.js",

material/base.html

@@ -190,7 +190,7 @@
       {% endblock %}
     </div>
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.4a3df536.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.7cbaf05d.min.js' | url }}"></script>
       <script id="__lang" type="application/json">
         {%- set translations = {} -%}
         {%- for key in [

src/assets/javascripts/actions/main/sidebar/index.ts

@@ -24,6 +24,31 @@
  * Functions
  * ------------------------------------------------------------------------- */
 
+/**
+ * Set sidebar offset
+ *
+ * @param el - Sidebar element
+ * @param value - Sidebar offset
+ */
+export function setSidebarOffset(
+  el: HTMLElement, value: number
+): void {
+  el.style.top = `${value}px`
+}
+
+/**
+ * Reset sidebar offset
+ *
+ * @param el - Sidebar element
+ */
+export function resetSidebarOffset(
+  el: HTMLElement
+): void {
+  el.style.top = ""
+}
+
+/* ------------------------------------------------------------------------- */
+
 /**
  * Set sidebar height
  *

src/assets/javascripts/components/navigation/index.ts

@@ -24,6 +24,7 @@ import { Observable, OperatorFunction, pipe } from "rxjs"
 import { map, shareReplay, switchMap } from "rxjs/operators"
 
 import {
+  Header,
   Main,
   NavigationLayer,
   Sidebar,
@@ -70,6 +71,7 @@ export type Navigation =
  * Mount options
  */
 interface MountOptions {
+  header$: Observable<Header>          /* Header observable */
   main$: Observable<Main>              /* Main area observable */
   viewport$: Observable<Viewport>      /* Viewport observable */
   screen$: Observable<boolean>         /* Screen media observable */
@@ -87,7 +89,7 @@ interface MountOptions {
  * @return Operator function
  */
 export function mountNavigation(
-  { main$, viewport$, screen$ }: MountOptions
+  { header$, main$, viewport$, screen$ }: MountOptions
 ): OperatorFunction<HTMLElement, Navigation> {
   return pipe(
     switchMap(el => screen$
@@ -98,7 +100,7 @@ export function mountNavigation(
           if (screen) {
             return watchSidebar(el, { main$, viewport$ })
               .pipe(
-                paintSidebar(el),
+                paintSidebar(el, { header$ }),
                 map(sidebar => ({ sidebar }))
               )
 

src/assets/javascripts/components/toc/index.ts

@@ -108,7 +108,7 @@ export function mountTableOfContents(
             /* Watch and paint sidebar */
             const sidebar$ = watchSidebar(el, { main$, viewport$ })
               .pipe(
-                paintSidebar(el)
+                paintSidebar(el, { header$ })
               )
 
             /* Watch and paint anchor list (scroll spy) */

src/assets/javascripts/index.ts

@@ -161,7 +161,7 @@ export function initialize(config: unknown) {
 
   const navigation$ = useComponent("navigation")
     .pipe(
-      mountNavigation({ main$, viewport$, screen$ })
+      mountNavigation({ header$, main$, viewport$, screen$ })
     )
 
   const toc$ = useComponent("toc")

src/assets/javascripts/observables/agent/viewport/_/index.ts

@@ -88,9 +88,9 @@ export function watchViewport(): Observable<Viewport> {
 export function watchViewportAt(
   el: HTMLElement, { header$, viewport$ }: WatchRelativeOptions
 ): Observable<Viewport> {
-  return combineLatest([viewport$, header$])
+  return combineLatest([header$, viewport$])
     .pipe(
-      map(([{ offset, size }, { height }]) => ({
+      map(([{ height }, { offset, size }]) => ({
         offset: {
           x: offset.x - el.offsetLeft,
           y: offset.y - el.offsetTop + height

src/assets/javascripts/observables/anchor/index.ts

@@ -149,9 +149,9 @@ export function watchAnchorList(
       }),
 
       /* Re-compute partition when viewport offset changes */
-      switchMap(index => combineLatest(viewport$, adjust$)
+      switchMap(index => combineLatest(adjust$, viewport$)
         .pipe(
-          scan(([prev, next], [{ offset: { y } }, adjust]) => {
+          scan(([prev, next], [adjust, { offset: { y } }]) => {
 
             /* Look forward */
             while (next.length) {

src/assets/javascripts/observables/main/_/index.ts

@@ -83,29 +83,30 @@ export function watchMain(
     )
 
   /* Compute the main area's visible height */
-  const height$ = combineLatest([viewport$, adjust$])
+  const height$ = combineLatest([adjust$, viewport$])
     .pipe(
-      map(([{ offset: { y }, size: { height } }, adjust]) => {
+      map(([adjust, { offset: { y }, size: { height } }]) => {
         const top    = el.offsetTop
         const bottom = el.offsetHeight + top
         return height
           - Math.max(0, top    - y,  adjust)
           - Math.max(0, height + y - bottom)
       }),
+      map(height => Math.max(0, height)),
       distinctUntilChanged()
     )
 
   /* Compute whether the viewport offset is past the main area's top */
-  const active$ = combineLatest([viewport$, adjust$])
+  const active$ = combineLatest([adjust$, viewport$])
     .pipe(
-      map(([{ offset: { y } }, adjust]) => y >= el.offsetTop - adjust),
+      map(([adjust, { offset: { y } }]) => y >= el.offsetTop - adjust),
       distinctUntilChanged()
     )
 
   /* Combine into a single hot observable */
-  return combineLatest([height$, adjust$, active$])
+  return combineLatest([adjust$, height$, active$])
     .pipe(
-      map(([height, adjust, active]) => ({
+      map(([adjust, height, active]) => ({
         offset: el.offsetTop - adjust,
         height,
         active

src/assets/javascripts/observables/main/sidebar/index.ts

@@ -20,7 +20,6 @@
  * IN THE SOFTWARE.
  */
 
-import { equals } from "ramda"
 import {
   MonoTypeOperatorFunction,
   Observable,
@@ -30,21 +29,26 @@ import {
 } from "rxjs"
 import {
   distinctUntilChanged,
+  distinctUntilKeyChanged,
   finalize,
   map,
   observeOn,
   shareReplay,
-  tap
+  tap,
+  withLatestFrom
 } from "rxjs/operators"
 
 import {
   resetSidebarHeight,
   resetSidebarLock,
+  resetSidebarOffset,
   setSidebarHeight,
-  setSidebarLock
+  setSidebarLock,
+  setSidebarOffset
 } from "actions"
 
 import { Viewport } from "../../agent"
+import { Header } from "../../header"
 import { Main } from "../_"
 
 /* ----------------------------------------------------------------------------
@@ -71,6 +75,13 @@ interface WatchOptions {
   viewport$: Observable<Viewport>      /* Viewport observable */
 }
 
+/**
+ * Paint options
+ */
+interface PaintOptions {
+  header$: Observable<Header>          /* Header observable */
+}
+
 /* ----------------------------------------------------------------------------
  * Functions
  * ------------------------------------------------------------------------- */
@@ -93,30 +104,42 @@ export function watchSidebar(
 ): Observable<Sidebar> {
 
   /* Adjust for internal main area offset */
-  const adjust = parseFloat(
+  const adjust$ = viewport$
-    getComputedStyle(el.parentElement!)
+    .pipe(
-      .getPropertyValue("padding-top")
+      distinctUntilKeyChanged("size"),
-  )
+      map(() => parseFloat(
+        getComputedStyle(el.parentElement!)
+          .getPropertyValue("padding-top")
+      )),
+      distinctUntilChanged()
+    )
 
   /* Compute the sidebar's available height */
-  const height$ = combineLatest([viewport$, main$])
+  const height$ = viewport$
     .pipe(
-      map(([{ offset: { y } }, { offset, height }]) => {
+      withLatestFrom(adjust$, main$),
-        return height - adjust + Math.min(adjust, Math.max(0, y - offset))
+      map(([{ offset: { y } }, adjust, { offset, height }]) => (
-      })
+        height
+          + Math.min(adjust, Math.max(0, y - offset))
+          - adjust
+      )),
+      distinctUntilChanged()
     )
 
   /* Compute whether the sidebar should be locked */
-  const lock$ = combineLatest([viewport$, main$])
+  const lock$ = viewport$
     .pipe(
-      map(([{ offset: { y } }, { offset }]) => y >= offset + adjust)
+      withLatestFrom(adjust$, main$),
+      map(([{ offset: { y } }, adjust, { offset }]) => (
+        y >= offset + adjust
+      )),
+      distinctUntilChanged()
     )
 
   /* Combine into single hot observable */
   return combineLatest([height$, lock$])
     .pipe(
       map(([height, lock]) => ({ height, lock })),
-      distinctUntilChanged<Sidebar>(equals),
       shareReplay(1)
     )
 }
@@ -127,23 +150,35 @@ export function watchSidebar(
  * Paint sidebar
  *
  * @param el - Sidebar element
+ * @param options - Options
  *
  * @return Operator function
  */
 export function paintSidebar(
-  el: HTMLElement
+  el: HTMLElement, { header$ }: PaintOptions
 ): MonoTypeOperatorFunction<Sidebar> {
   return pipe(
 
     /* Defer repaint to next animation frame */
     observeOn(animationFrameScheduler),
-    tap(({ height, lock }) => {
+    withLatestFrom(header$),
+    tap(([{ height, lock }, { height: offset }]) => {
       setSidebarHeight(el, height)
       setSidebarLock(el, lock)
+
+      /* Set offset in locked state depending on header height */
+      if (lock)
+        setSidebarOffset(el, offset)
+      else
+        resetSidebarOffset(el)
     }),
 
+    /* Re-map to sidebar */
+    map(([sidebar]) => sidebar),
+
     /* Reset on complete or error */
     finalize(() => {
+      resetSidebarOffset(el)
       resetSidebarHeight(el)
       resetSidebarLock(el)
     })

src/assets/javascripts/observables/navigation/layer/index.ts

@@ -90,9 +90,9 @@ export function watchNavigationLayer(
   }
 
   /* Determine topmost layer */
-  const layer$ = merge(
+  const layer$ = merge(...[...table.keys()].map(input => (
-    ...[...table.keys()].map(input => fromEvent(input, "change"))
+    fromEvent(input, "change")
-  )
+  )))
     .pipe(
       map(() => getElementOrThrow(".md-nav__list", table.get(
         findLast(({ checked }) => checked, [...table.keys()])!