From 74d48f5ad20568c610156c3b399375bdd22dc6ce Mon Sep 17 00:00:00 2001
From: Michael Howell <michael@notriddle.com>
Date: Thu, 23 Jan 2025 10:15:25 -0700
Subject: [PATCH] Prevent the real sidebar position from becoming unsynced from
 the JS

This way, whatever behavior the browser might use for checkboxes
will apply to the CSS class, localStorage, and the visible state.
---
 src/theme/book.js | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/src/theme/book.js b/src/theme/book.js
index 178f1e902d..a5c255500c 100644
--- a/src/theme/book.js
+++ b/src/theme/book.js
@@ -449,6 +449,7 @@ function playground_text(playground, hidden = true) {
     var sidebar = document.getElementById("sidebar");
     var sidebarLinks = document.querySelectorAll('#sidebar a');
     var sidebarToggleButton = document.getElementById("sidebar-toggle");
+    var sidebarToggleAnchor = document.getElementById("sidebar-toggle-anchor");
     var sidebarResizeHandle = document.getElementById("sidebar-resize-handle");
     var firstContact = null;
 
@@ -475,22 +476,16 @@ function playground_text(playground, hidden = true) {
     }
 
     // Toggle sidebar
-    sidebarToggleButton.addEventListener('click', function sidebarToggle() {
-        if (body.classList.contains("sidebar-hidden")) {
+    sidebarToggleAnchor.addEventListener('change', function sidebarToggle() {
+        if (sidebarToggleAnchor.checked) {
             var current_width = parseInt(
                 document.documentElement.style.getPropertyValue('--sidebar-width'), 10);
             if (current_width < 150) {
                 document.documentElement.style.setProperty('--sidebar-width', '150px');
             }
             showSidebar();
-        } else if (body.classList.contains("sidebar-visible")) {
-            hideSidebar();
         } else {
-            if (getComputedStyle(sidebar)['transform'] === 'none') {
-                hideSidebar();
-            } else {
-                showSidebar();
-            }
+            hideSidebar();
         }
     });