feat: add toggle button for docs navigation (#669)

Closes #668
hbstack · May 5, 2024 · 732496e · 732496e
1 parent 12240a5
commit 732496e
Show file tree

Hide file tree

Showing 9 changed files with 44 additions and 4 deletions.
diff --git a/assets/hb/modules/docs/js/index.ts b/assets/hb/modules/docs/js/index.ts
@@ -1 +1,2 @@
 import "js/bootstrap/src/collapse";
+import "./nav-toggle";
diff --git a/assets/hb/modules/docs/js/nav-toggle.ts b/assets/hb/modules/docs/js/nav-toggle.ts
@@ -0,0 +1,17 @@
+(() => {
+  const toggle = document.querySelector('.hb-docs-nav-toggle')
+  const docs = document.querySelector('.hb-docs')
+  if (!toggle || !docs) {
+    return
+  }
+
+  const className = 'sidebar-off'
+
+  toggle.addEventListener('click', () => {
+    if (docs.classList.contains(className)) {
+      docs.classList.remove(className)
+    } else {
+      docs.classList.add(className)
+    }
+  })
+})()
diff --git a/assets/hb/modules/docs/scss/_main.scss b/assets/hb/modules/docs/scss/_main.scss
@@ -4,6 +4,20 @@
         grid-template-areas: "sidebar main";
         grid-template-columns: 1fr 5fr;
         gap: 1.5rem;
+
+        &.sidebar-off {
+            grid-template-columns: 0 5fr;
+
+            .hb-docs-sidebar {
+                opacity: 0;
+            }
+
+            .hb-docs-nav-toggle {
+                svg {
+                    transform: rotate(180deg);
+                }
+            }
+        }
     }
 }
 

diff --git a/assets/hb/modules/docs/scss/_nav.scss b/assets/hb/modules/docs/scss/_nav.scss
@@ -26,9 +26,9 @@
     }
 }
 
-.hb-docs-nav-toggle {
+.hb-docs-nav-toggle-item {
     &[aria-expanded="true"] {
-        .hb-docs-nav-toggle-icon {
+        .hb-docs-nav-item-toggle-icon {
             transform: rotate(90deg);
         }
     }

diff --git a/assets/hb/modules/docs/scss/_sidebar.scss b/assets/hb/modules/docs/scss/_sidebar.scss
@@ -1,5 +1,6 @@
 .hb-docs-sidebar {
     grid-area: sidebar;
+    transition: .3s linear;
 
     @include media-breakpoint-down(lg) {
         padding: 0!important;

diff --git a/layouts/docs/list.html b/layouts/docs/list.html
@@ -8,5 +8,6 @@
       {{ partial "hb/modules/docs/section" . }}
       {{ partial "hugopress/functions/render-hooks" (dict "Page" . "Name" "hb-docs-main-end") }}
     </div>
+    {{ partial "hb/modules/docs/nav-toggle" . }}
   </div>
 {{- end -}}
diff --git a/layouts/docs/single.html b/layouts/docs/single.html
@@ -26,5 +26,6 @@ <h1 class="mb-3">{{ .Title }}</h1>
       </div>
       {{ partial "hugopress/functions/render-hooks" (dict "Page" . "Name" "hb-docs-main-end ") }}
     </div>
+    {{ partial "hb/modules/docs/nav-toggle" . }}
   </div>
 {{- end -}}
diff --git a/layouts/partials/hb/modules/docs/nav-toggle.html b/layouts/partials/hb/modules/docs/nav-toggle.html
@@ -0,0 +1,5 @@
+<button
+  class="hb-docs-nav-toggle btn btn-outline-secondary position-fixed bottom-0 start-0 mb-2 ms-2 d-none d-lg-flex p-1 z-1"
+  aria-label="Toggle docs navigation">
+  {{ partial "icons/icon" (dict "vendor" "bootstrap" "name" "text-indent-right" "size" "1.5em ") }}
+</button>
diff --git a/layouts/partials/hb/modules/docs/nav.html b/layouts/partials/hb/modules/docs/nav.html
@@ -49,7 +49,7 @@ <h5 class="offcanvas-title" id="hb-docs-nav-label">
           </a>
           {{ if .Children }}
             <button
-              class="hb-docs-nav-toggle btn btn-link py-0 px-1 text-secondary d-flex align-items-center"
+              class="hb-docs-nav-item-toggle btn btn-link py-0 px-1 text-secondary d-flex align-items-center"
               type="button"
               data-bs-toggle="collapse"
               data-bs-target="#{{ $collapseId }}"
@@ -58,7 +58,7 @@ <h5 class="offcanvas-title" id="hb-docs-nav-label">
               {{ partial "icons/icon" (dict
                 "vendor" "bootstrap"
                 "name" "chevron-right"
-                "className" "hb-docs-nav-toggle-icon"
+                "className" "hb-docs-nav-item-toggle-icon"
                 "width" "1.25rem"
                 "height" "1.25rem")
               }}