Refactored navigation observables

src/assets/javascripts/components2/index.ts

@@ -22,4 +22,5 @@
 
 export * from "./_"
 export * from "./main"
+export * from "./navigation"
 export * from "./search"

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

@@ -20,7 +20,7 @@
  * IN THE SOFTWARE.
  */
 
-import { Observable, OperatorFunction, of, pipe } from "rxjs"
+import { Observable, OperatorFunction, pipe } from "rxjs"
 import { map, shareReplay, switchMap } from "rxjs/operators"
 
 import {
@@ -75,51 +75,6 @@ interface MountOptions {
   screen$: Observable<boolean>         /* Screen media observable */
 }
 
-/* ----------------------------------------------------------------------------
- * Helper functions
- * ------------------------------------------------------------------------- */
-
-/**
- * Mount navigation below screen from source observable
- *
- * @param options - Options
- *
- * @return Operator function
- */
-function mountNavigationBelowScreen(
-  _options: MountOptions
-): OperatorFunction<HTMLElement, NavigationBelowScreen> {
-  return pipe(
-    map(el => getElements("nav", el)),
-    switchMap(els => watchNavigationLayer(els)
-      .pipe(
-        paintNavigationLayer(els),
-        map(layer => ({ layer }))
-      )
-    )
-  )
-}
-
-/**
- * Mount navigation above screen from source observable
- *
- * @param options - Options
- *
- * @return Operator function
- */
-function mountNavigationAboveScreen(
-  options: MountOptions
-): OperatorFunction<HTMLElement, NavigationAboveScreen> {
-  return pipe(
-    switchMap(el => watchSidebar(el, options)
-      .pipe(
-        paintSidebar(el),
-        map(sidebar => ({ sidebar }))
-      )
-    )
-  )
-}
-
 /* ----------------------------------------------------------------------------
  * Functions
  * ------------------------------------------------------------------------- */
@@ -137,10 +92,26 @@ export function mountNavigation(
   return pipe(
     switchMap(el => options.screen$
       .pipe(
-        switchMap(screen => screen
+        switchMap(screen => {
-          ? of(el).pipe(mountNavigationAboveScreen(options))
+
-          : of(el).pipe(mountNavigationBelowScreen(options))
+          /* Mount sidebar for screen and above */
+          if (screen) {
+            return watchSidebar(el, options)
+              .pipe(
+                paintSidebar(el),
+                map(sidebar => ({ sidebar }))
               )
+
+          /* Mount navigation layer otherwise */
+          } else {
+            const els = getElements("nav", el)
+            return watchNavigationLayer(els)
+              .pipe(
+                paintNavigationLayer(els),
+                map(layer => ({ layer }))
+              )
+          }
+        })
       )
     ),
     shareReplay(1)

src/assets/javascripts/index.ts

@@ -30,24 +30,16 @@ import * as Clipboard from "clipboard"
 import { identity, values } from "ramda"
 import {
   EMPTY,
-  Observable,
   merge,
   of,
-  fromEvent,
+  fromEvent
-  OperatorFunction,
-  pipe
 } from "rxjs"
 import {
   delay,
   filter,
   map,
-  pluck,
   switchMap,
-  switchMapTo,
+  tap
-  tap,
-  distinctUntilKeyChanged,
-  shareReplay,
-  withLatestFrom
 } from "rxjs/operators"
 
 import {
@@ -73,14 +65,15 @@ import { renderSource } from "templates"
 import { not, takeIf } from "utilities"
 import { renderClipboard } from "templates/clipboard"
 import { fetchGitHubStats } from "modules/source/github"
-import { mountNavigation } from "components2/navigation"
-import { watchComponentMap, useComponent } from "components2/_"
 import { renderTable } from "templates/table"
 import { setToggle } from "actions"
 import {
   Component,
   mountMain,
-  mountSearch
+  mountNavigation,
+  mountSearch,
+  useComponent,
+  watchComponentMap
 } from "components2"
 
 /* ----------------------------------------------------------------------------
@@ -234,8 +227,8 @@ export function initialize(config: unknown) {
   const document$ = watchDocument()
   const hash$ = watchLocationHash()
   const viewport$ = watchViewport()
-  const screen$ = watchMedia("(min-width: 960px)")
+  const tablet$ = watchMedia("(min-width: 960px)")
-  const tablet$ = watchMedia("(min-width: 1220px)")
+  const screen$ = watchMedia("(min-width: 1220px)")
   const key$ = watchKeyboard()
 
   /* ----------------------------------------------------------------------- */
@@ -251,7 +244,7 @@ export function initialize(config: unknown) {
 
   const main$ = useComponent("main")
     .pipe(
-      mountMain({ header$, viewport$ }),
+      mountMain({ header$, viewport$ })
     )
 
   /* ----------------------------------------------------------------------- */