Modernize docs navigation buttons with icons

- Replaced text-based "Show/Hide" sidebar toggles with SVG chevron icons.
- Added a hamburger menu icon to the "Contents" button on mobile view.
- Updated `js/docsView.js` to handle icon toggling and properly hide flex container elements using the `.hidden` class.
- Improved accessibility by maintaining `aria-expanded` attributes.

Co-authored-by: PR0M3TH3AN <[email protected]>

js/docsView.js

@@ -105,21 +105,35 @@ function buildLink(item) {
   return link;
 }
 
+function getChevronIcon(expanded) {
+  if (expanded) {
+    // Chevron Down
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
+      <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+    </svg>`;
+  }
+  // Chevron Right
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
+    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
+  </svg>`;
+}
+
 function buildToggleButton(item, controlsId, expanded, groupList) {
   const button = document.createElement("button");
   button.type = "button";
-  button.className = "btn-ghost btn-xs";
+  button.className = "btn-ghost btn-xs btn-square text-muted hover:text-text-primary";
   button.setAttribute("aria-expanded", expanded ? "true" : "false");
   button.setAttribute("aria-controls", controlsId);
   button.setAttribute("aria-label", `Toggle ${item.title || item.slug} section`);
-  button.textContent = expanded ? "Hide" : "Show";
+  button.innerHTML = getChevronIcon(expanded);
   button.addEventListener("click", () => {
     const isExpanded = button.getAttribute("aria-expanded") === "true";
     const nextExpanded = !isExpanded;
     button.setAttribute("aria-expanded", nextExpanded ? "true" : "false");
-    button.textContent = nextExpanded ? "Hide" : "Show";
+    button.innerHTML = getChevronIcon(nextExpanded);
     if (groupList) {
       groupList.hidden = !nextExpanded;
+      groupList.classList.toggle("hidden", !nextExpanded);
     }
   });
   return button;
@@ -152,6 +166,9 @@ function renderTocItems(items, container, level = 0, groupPrefix = "docs-toc") {
       childList.id = groupId;
       childList.classList.add("ml-md", "border-l", "border-border", "pl-md");
       childList.hidden = !expanded;
+      if (!expanded) {
+        childList.classList.add("hidden");
+      }
 
       const toggle = buildToggleButton(item, groupId, expanded, childList);
       row.appendChild(toggle);
@@ -220,8 +237,9 @@ function updateActiveToc(slug) {
       groups.forEach((group) => {
         if (group?.button && group?.list) {
           group.button.setAttribute("aria-expanded", "true");
-          group.button.textContent = "Hide";
+          group.button.innerHTML = getChevronIcon(true);
           group.list.hidden = false;
+          group.list.classList.remove("hidden");
         }
       });
     }

views/docs.html

@@ -19,12 +19,26 @@
           </h2>
           <button
             type="button"
-            class="btn-ghost lg:hidden"
+            class="btn-ghost lg:hidden flex items-center gap-2"
             aria-controls="docsTocDrawer"
             aria-expanded="false"
             data-docs-toc-toggle
           >
-            Contents
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-5 w-5"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M4 6h16M4 12h16M4 18h16"
+              />
+            </svg>
+            <span>Contents</span>
           </button>
         </header>
         <div id="markdown-container" class="markdown-prose">