From e6e3b47fce211d2f9cfa44e22c428730cbde1e82 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 27 Jan 2026 19:43:24 +0000
Subject: [PATCH] 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 <53631862+PR0M3TH3AN@users.noreply.github.com>
---
 js/docsView.js  | 26 ++++++++++++++++++++++----
 views/docs.html | 18 ++++++++++++++++--
 2 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/js/docsView.js b/js/docsView.js
index 7c0366ec..59a37fc9 100644
--- a/js/docsView.js
+++ b/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");
         }
       });
     }
diff --git a/views/docs.html b/views/docs.html
index 8ed33524..21197b7a 100644
--- a/views/docs.html
+++ b/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">