From e02c7974c5ff1afa05908e399c3cfab8eb2dc13b Mon Sep 17 00:00:00 2001
From: Kenneth Reitz <me@kennethreitz.org>
Date: Tue, 27 May 2025 09:47:17 -0400
Subject: [PATCH] Disable sidebar on mobile and fix responsive behavior

Remove transform-based mobile sidebar in favor of complete hiding.
Update breakpoints and remove unnecessary mobile touch handlers.
---
 kjvstudy_org/static/style.css    | 19 ++++++++-----------
 kjvstudy_org/templates/base.html | 25 +++++++++++--------------
 2 files changed, 19 insertions(+), 25 deletions(-)

diff --git a/kjvstudy_org/static/style.css b/kjvstudy_org/static/style.css
index 0b216f5..06d3424 100644
--- a/kjvstudy_org/static/style.css
+++ b/kjvstudy_org/static/style.css
@@ -757,21 +757,20 @@ div {
     }
 
     .sidebar {
-        transform: translateX(-320px);
-        width: 100%;
-        max-width: 320px;
-        -webkit-transform: translate3d(-320px, 0, 0);
+        display: none !important;
     }
 
     .sidebar.open {
-        transform: translateX(0);
-        -webkit-transform: translate3d(0, 0, 0);
-        box-shadow: 4px 0 10px rgba(0, 0, 0, 0.2);
+        display: none !important;
+    }
+
+    .sidebar-overlay {
+        display: none !important;
     }
 
     .main-content {
         margin-left: 0;
-        padding-top: 4rem;
+        padding-top: 2rem;
         position: relative;
         z-index: 10;
         width: 100%;
@@ -780,9 +779,7 @@ div {
     .mobile-menu-button {
         display: block;
         padding: 1rem;
-        min-height: 48px;
-        min-width: 48px;
-        touch-action: manipulation;
+        min-heightone !important;
     }
 
     .container,
diff --git a/kjvstudy_org/templates/base.html b/kjvstudy_org/templates/base.html
index c1c4196..7371464 100644
--- a/kjvstudy_org/templates/base.html
+++ b/kjvstudy_org/templates/base.html
@@ -929,6 +929,11 @@
         <script>
             // Sidebar toggle functionality
             function toggleSidebar() {
+                // Don't show sidebar on mobile devices
+                if (window.innerWidth <= 768) {
+                    return;
+                }
+                
                 const sidebar = document.getElementById("sidebar");
                 const overlay = document.getElementById("sidebarOverlay");
                 const mainContent = document.querySelector(".main-content");
@@ -1022,13 +1027,13 @@
                     ).getPropertyValue("--background-color"));
             });
 
-            // Close sidebar when clicking on links (mobile)
+            // Close sidebar when clicking on links (mobile) - not needed on mobile anymore
             document.addEventListener("DOMContentLoaded", function () {
                 const sidebarLinks =
                     document.querySelectorAll(".sidebar-nav a");
                 sidebarLinks.forEach((link) => {
                     link.addEventListener("click", function () {
-                        if (window.innerWidth <= 768) {
+                        if (window.innerWidth > 768 && window.innerWidth <= 1024) {
                             toggleSidebar();
                         }
                     });
@@ -1036,7 +1041,7 @@
 
                 // Close sidebar on escape key
                 document.addEventListener("keydown", function (e) {
-                    if (e.key === "Escape") {
+                    if (e.key === "Escape" && window.innerWidth > 768) {
                         const sidebar = document.getElementById("sidebar");
                         if (sidebar.classList.contains("open")) {
                             toggleSidebar();
@@ -1045,8 +1050,9 @@
                 });
 
                 // Handle window resize
+                // Close sidebar when screen size changes to desktop
                 window.addEventListener("resize", function () {
-                    if (window.innerWidth > 768) {
+                    if (window.innerWidth > 1024) {
                         const sidebar = document.getElementById("sidebar");
                         const overlay =
                             document.getElementById("sidebarOverlay");
@@ -1135,16 +1141,7 @@
                         );
                         if (target) {
                             // Close mobile menu if open when navigating
-                            if (window.innerWidth <= 768) {
-                                const sidebar =
-                                    document.getElementById("sidebar");
-                                if (
-                                    sidebar &&
-                                    sidebar.classList.contains("open")
-                                ) {
-                                    toggleSidebar();
-                                }
-                            }
+                            // Remove mobile touch handler since sidebar is hidden on mobile
 
                             target.scrollIntoView({
                                 behavior: "smooth",