perf: cache sidebar and using JavaScript to locate current active menu (

#707)
hbstack · Jun 4, 2024 · 1ce46a2 · 1ce46a2
1 parent 32c400a
commit 1ce46a2
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 10 deletions.
diff --git a/assets/hb/modules/docs/js/index.ts b/assets/hb/modules/docs/js/index.ts
@@ -1,2 +1,3 @@
 import "js/bootstrap/src/collapse";
+import "./nav";
 import "./nav-toggle";
diff --git a/assets/hb/modules/docs/js/nav.ts b/assets/hb/modules/docs/js/nav.ts
@@ -0,0 +1,27 @@
+(() => {
+  const activeParent = (child: HTMLElement) => {
+    const parent = child.parentElement?.closest('.hb-docs-nav-links-group') as HTMLElement
+    if (parent == null) {
+      return
+    }
+
+    parent.querySelector('.collapse')?.classList.add('show')
+    const heading = parent.querySelector('.hb-docs-nav-heading') as HTMLElement
+    heading.classList.add('active')
+    heading.querySelector('.hb-docs-nav-item-toggle')?.setAttribute('aria-expanded', 'true')
+    console.log(parent.closest('.hb-docs-nav-links-group'))
+    activeParent(parent)
+  }
+
+  const active = (link: HTMLElement) => {
+    link.classList.add('active')
+    activeParent(link)
+  }
+
+  const link = document.querySelector(`.hb-docs-nav-links a[href="${location.pathname}"]`) as HTMLElement
+  if (link == null) {
+    return
+  }
+
+  active(link)
+})()
diff --git a/layouts/docs/list.html b/layouts/docs/list.html
@@ -1,7 +1,7 @@
 {{- define "main" }}
   <div class="hb-docs">
     <div class="hb-docs-sidebar" tabindex="-1" data-bs-hide="focusout">
-      {{ partial "hb/modules/docs/nav" . }}
+      {{ partialCached "hb/modules/docs/nav" . .FirstSection }}
     </div>
     <div class="hb-docs-main col-12 col-xxl-10">
       {{ partial "hugopress/functions/render-hooks" (dict "Page" . "Name" "hb-docs-main-begin") }}

diff --git a/layouts/docs/single.html b/layouts/docs/single.html
@@ -1,7 +1,7 @@
 {{- define "main" }}
   <div class="hb-docs">
     <div class="hb-docs-sidebar" tabindex="-1" data-bs-hide="focusout">
-      {{ partial "hb/modules/docs/nav" . }}
+      {{ partialCached "hb/modules/docs/nav" . .FirstSection }}
     </div>
     <div class="hb-docs-main">
       {{ partial "hugopress/functions/render-hooks" (dict "Page" . "Name" "hb-docs-main-begin") }}

diff --git a/layouts/partials/hb/modules/docs/nav.html b/layouts/partials/hb/modules/docs/nav.html
@@ -28,11 +28,7 @@ <h5 class="offcanvas-title" id="hb-docs-nav-label">
   {{- $border := default true site.Params.hb.docs.navs_border }}
   {{- range .Tree }}
     {{- $node := . }}
-    {{- $active := eq $page.RelPermalink .Page.RelPermalink }}
     {{- if $node.Page.IsSection }}
-      {{- if partial "hb/modules/docs/functions/is-section-page" (dict "Page" $page "Section" $node.Page) }}
-        {{- $active = true }}
-      {{- end }}
       <li class="hb-docs-nav-links-group">
         {{- $collapseId := "" }}
         {{- with $node.Page.File }}
@@ -41,7 +37,7 @@ <h5 class="offcanvas-title" id="hb-docs-nav-label">
           {{- $collapseId = printf "collapse-%d" now.UnixNano }}
         {{- end }}
         <div
-          class="hb-docs-nav-heading d-flex align-items-center justify-content-between rounded{{ cond $active ` active` `` }}">
+          class="hb-docs-nav-heading d-flex align-items-center justify-content-between rounded">
           <a
             class="d-flex flex-grow-1 align-items-center"
             href="{{ $node.Page.RelPermalink }}">
@@ -53,7 +49,7 @@ <h5 class="offcanvas-title" id="hb-docs-nav-label">
               type="button"
               data-bs-toggle="collapse"
               data-bs-target="#{{ $collapseId }}"
-              aria-expanded="{{ cond $active `true` `false` }}"
+              aria-expanded="false"
               aria-controls="{{ $collapseId }}">
               {{ partial "icons/icon" (dict
                 "vendor" "bootstrap"
@@ -67,7 +63,7 @@ <h5 class="offcanvas-title" id="hb-docs-nav-label">
         </div>
         {{- with .Children }}
           <ul
-            class="collapse list-unstyled fw-normal small {{ cond $border `ms-1 ps-1 border-start` `ms-2` }}{{ cond $active ` show` `` }}"
+            class="collapse list-unstyled fw-normal small {{ cond $border `ms-1 ps-1 border-start` `ms-2` }}"
             id="{{ $collapseId }}">
             {{- template "walk-docs-tree" (dict "Tree" . "Page" $page) }}
             {{- with $node.Page.Params.nav_menus }}
@@ -79,7 +75,7 @@ <h5 class="offcanvas-title" id="hb-docs-nav-label">
     {{- else }}
       <li class="hb-docs-nav-links-span-all">
         <a
-          class="hb-docs-nav-link d-flex align-items-center rounded{{ cond $active ` active` `` }}"
+          class="hb-docs-nav-link d-flex align-items-center rounded"
           {{ with .Page.Params.redirect }}
             target="_blank" href="{{ . | absURL }}"
           {{ else }}