From 3ff1ef0e148fe4c34f9aabfde8147262ca5997ea Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Mon, 27 Apr 2026 22:40:17 +0100
Subject: [PATCH] docs: replace demo sidebar icon with Controls & Theme toggle

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 packages/docs/src/pages/demo.module.css | 36 ++++++++++++++++++++++
 packages/docs/src/pages/demo.tsx        | 41 +++----------------------
 2 files changed, 41 insertions(+), 36 deletions(-)

diff --git a/packages/docs/src/pages/demo.module.css b/packages/docs/src/pages/demo.module.css
index 02cb53c32..ad73142a7 100644
--- a/packages/docs/src/pages/demo.module.css
+++ b/packages/docs/src/pages/demo.module.css
@@ -59,6 +59,42 @@
     outline-offset: 2px;
 }
 
+.toggleButton {
+    display: flex;
+    align-items: center;
+    background: var(--ifm-hover-overlay);
+    border: 1px solid var(--ifm-toc-border-color);
+    color: var(--ifm-navbar-link-color);
+    cursor: pointer;
+    padding: 3px 10px;
+    border-radius: 6px;
+    font-size: 0.8em;
+    line-height: 1.4;
+    transition: color 0.15s, background 0.15s, border-color 0.15s;
+}
+
+.toggleButton:hover {
+    color: var(--ifm-navbar-link-hover-color);
+    border-color: var(--ifm-color-emphasis-400);
+}
+
+.toggleButton:focus-visible {
+    outline: 2px solid var(--ifm-color-primary);
+    outline-offset: 2px;
+}
+
+.toggleButtonActive {
+    background: var(--ifm-color-primary);
+    border-color: var(--ifm-color-primary);
+    color: var(--ifm-color-white, #fff);
+}
+
+.toggleButtonActive:hover {
+    background: var(--ifm-color-primary-dark, var(--ifm-color-primary));
+    border-color: var(--ifm-color-primary-dark, var(--ifm-color-primary));
+    color: var(--ifm-color-white, #fff);
+}
+
 .tip {
     display: flex;
     align-items: center;
diff --git a/packages/docs/src/pages/demo.tsx b/packages/docs/src/pages/demo.tsx
index 3f44a6651..e8d7a1983 100644
--- a/packages/docs/src/pages/demo.tsx
+++ b/packages/docs/src/pages/demo.tsx
@@ -87,45 +87,14 @@ const DemoPage: React.FC = () => {
                 />
                 <div className={styles.divider} />
                 <button
-                    className={styles.iconButton}
+                    className={`${styles.toggleButton} ${
+                        showSidebar ? styles.toggleButtonActive : ''
+                    }`}
                     title={showSidebar ? 'Close sidebar' : 'Open sidebar'}
+                    aria-pressed={showSidebar}
                     onClick={() => setShowSidebar((v) => !v)}
                 >
-                    <svg
-                        width="16"
-                        height="16"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        strokeWidth="2"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                    >
-                        <line x1="4" y1="6" x2="20" y2="6" />
-                        <line x1="4" y1="12" x2="20" y2="12" />
-                        <line x1="4" y1="18" x2="20" y2="18" />
-                        <circle
-                            cx="9"
-                            cy="6"
-                            r="2"
-                            fill="currentColor"
-                            stroke="none"
-                        />
-                        <circle
-                            cx="15"
-                            cy="12"
-                            r="2"
-                            fill="currentColor"
-                            stroke="none"
-                        />
-                        <circle
-                            cx="9"
-                            cy="18"
-                            r="2"
-                            fill="currentColor"
-                            stroke="none"
-                        />
-                    </svg>
+                    Controls & Theme
                 </button>
             </div>
             <ExampleFrame