Fixed sidebar not focusing active item when navigation is huge

material/base.html

@@ -234,13 +234,13 @@
       </script>
     {% endblock %}
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.c45ce4b3.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.6d7e1051.min.js' | url }}"></script>
       {% for path in config.extra_javascript %}
         <script src="{{ path | url }}"></script>
       {% endfor %}
     {% endblock %}
     {% if page.meta and page.meta.ᴴₒᴴₒᴴₒ %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/extra.ef53c8a4.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/extra.e916454c.min.css' | url }}">
       <script src="{{ 'assets/javascripts/extra/bundle.cfb3feee.min.js' | url }}" defer></script>
     {% endif %}
   </body>

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

@@ -29,9 +29,8 @@ import {
   defer,
   distinctUntilChanged,
   finalize,
+  first,
   map,
-  observeOn,
-  take,
   tap,
   withLatestFrom
 } from "rxjs"
@@ -154,11 +153,13 @@ export function mountSidebar(
   const { y } = getElementOffset(inner)
   return defer(() => {
     const push$ = new Subject<Sidebar>()
-    push$
+    const next$ = push$
       .pipe(
-        auditTime(0, animationFrameScheduler),
-        withLatestFrom(header$)
+        auditTime(0, animationFrameScheduler)
       )
+
+    /* Update sidebar height and offset */
+    next$.pipe(withLatestFrom(header$))
       .subscribe({
 
         /* Handle emission */
@@ -175,11 +176,7 @@ export function mountSidebar(
       })
 
     /* Bring active item into view on initial load */
-    push$
-      .pipe(
-        observeOn(animationFrameScheduler),
-        take(1)
-      )
+    next$.pipe(first())
       .subscribe(() => {
         for (const item of getElements(".md-nav__link--active[href]", el)) {
           const container = getElementContainer(item)