style: change the nav toggle icon to indicate the expand state

hbstack · Jul 4, 2023 · 6104da3 · 6104da3
1 parent 34f3c43
commit 6104da3
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/assets/hb/modules/docs/scss/_nav.scss b/assets/hb/modules/docs/scss/_nav.scss
@@ -25,3 +25,11 @@
         }
     }
 }
+
+.hb-docs-nav-toggle {
+    &[aria-expanded="true"] {
+        .hb-docs-nav-toggle-icon {
+            transform: rotate(90deg);
+        }
+    }
+}
diff --git a/layouts/partials/hb/modules/docs/nav.html b/layouts/partials/hb/modules/docs/nav.html
@@ -40,15 +40,16 @@ <h5 class="offcanvas-title" id="hb-docs-nav-label">
           </a>
           {{ if .Children }}
             <button
-              class="btn btn-link py-0 px-1 text-secondary d-flex align-items-center"
+              class="hb-docs-nav-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 }}"
               aria-expanded="{{ cond $active `true` `false` }}"
               aria-controls="{{ $collapseId }}">
               {{ partial "icons/icon" (dict
                 "vendor" "bootstrap"
-                "name" "chevron-expand"
+                "name" "chevron-right"
+                "className" "hb-docs-nav-toggle-icon"
                 "width" "1.25rem"
                 "height" "1.25rem")
               }}