Fix sidebar on mobile

Arch-Network · Dec 22, 2024 · 6d32ed7 · 6d32ed7
1 parent aa71ffb
commit 6d32ed7
Show file tree

Hide file tree

Showing 2 changed files with 116 additions and 34 deletions.
diff --git a/theme/custom.css b/theme/custom.css
@@ -69,6 +69,7 @@
     background: var(--bg);
     z-index: 3;
     padding-top: var(--menu-bar-height);
+    display: block;
 }
 
 /* ASCII diagrams */
@@ -199,57 +200,99 @@ main {
 @media only screen and (max-width: 1100px) {
     #menu-bar {
         left: 0;
+        width: 100%;
     }
 
     .sidebar {
-        left: -var(--sidebar-width);
+        position: fixed;
+        left: -100%;
+        width: 80%;
+        max-width: 300px;
+        height: 100vh;
+        top: 0;
         transition: left 0.3s ease;
+        z-index: 9999;
+        background: var(--bg);
+        padding-top: var(--menu-bar-height);
+        overflow-y: auto;
     }
 
-    .sidebar.visible {
-        left: 0;
+    /* Force sidebar content to be visible */
+    .sidebar * {
+        display: block !important;
+        visibility: visible !important;
+        opacity: 1 !important;
     }
 
-    .page-wrapper {
-        margin-left: 0;
+    /* Ensure chapter items are visible */
+    .sidebar .chapter,
+    .sidebar .chapter-item,
+    .sidebar a,
+    .sidebar-scrollbox {
+        display: block !important;
+        visibility: visible !important;
+        opacity: 1 !important;
     }
 
-    .page {
-        margin-right: 0;
+    /* Show sidebar when visible class is present */
+    .sidebar.visible,
+    .js .sidebar.visible,
+    body.sidebar-visible .sidebar {
+        left: 0;
+        box-shadow: 2px 0 12px rgba(0,0,0,0.2);
+        display: block !important;
+        visibility: visible !important;
+        opacity: 1 !important;
     }
 
-    .right-sidebar {
-        display: none;
+    .sidebar .chapter {
+        padding: 0 15px;
+        margin-top: 15px;
     }
 
-    .nav-chapters {
-        display: none;
+    .sidebar .chapter-item {
+        margin: 5px 0;
+        padding: 5px 0;
     }
 
-    .content {
-        margin: 0;
-        padding: 15px;
+    /* Ensure sidebar scrollbox is visible and scrollable */
+    .sidebar-scrollbox {
+        height: 100%;
+        overflow-y: auto;
+        position: relative;
+        padding: 10px;
     }
-    
-    .feature-grid {
-        grid-template-columns: 1fr;
+
+    body.sidebar-visible {
+        overflow: hidden;
     }
-
-    .sidebar {
+
+    /* Add overlay when sidebar is visible */
+    .sidebar-overlay {
         display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0,0,0,0.5);
+        z-index: 9998;
     }
-
-    main {
-        margin: 0;
-        padding: 0;
+
+    .sidebar-visible .sidebar-overlay {
+        display: block;
     }
 
-    .nav-wide-wrapper {
-        display: none;
+    .page-wrapper {
+        margin-left: 0;
+        width: 100%;
     }
-    
+
     .content {
-        padding: 0 1rem;
+        margin: 0;
+        padding: 15px;
+        width: 100%;
+        overflow-x: hidden;
     }
 }
 
@@ -910,7 +953,7 @@ code {
 
 /* Menu button */
 #menu-bar-toggle {
-    display: none;
+    display: block;
     position: fixed;
     top: 0;
     left: 0;
@@ -920,9 +963,8 @@ code {
     background: none;
     color: var(--fg);
     cursor: pointer;
-    z-index: 3;
+    z-index: 10000;
     padding: 0 15px;
-    transform: none;
 }
 
 /* Theme button */
@@ -1113,9 +1155,10 @@ h3:hover .header-link {
     display: none;
 }
 
-/* Add styles for when sidebar is open */
-.sidebar-visible #menu-bar {
-    left: var(--sidebar-width);
+@media only screen and (min-width: 1101px) {
+    .sidebar-visible #menu-bar {
+        left: var(--sidebar-width);
+    }
 }
 
 /* Add this to handle the page wrapper spacing */

diff --git a/theme/custom.js b/theme/custom.js
@@ -1,3 +1,42 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const menuButton = document.getElementById('menu-bar-toggle');
+    const sidebar = document.querySelector('.sidebar');
+
+    if (menuButton && sidebar) {
+        menuButton.addEventListener('click', function(e) {
+            e.preventDefault();
+            document.body.classList.toggle('sidebar-visible');
+            sidebar.classList.toggle('visible');
+        });
+    }
+
+    // Add touch event handling for sidebar
+    let touchStartX = 0;
+    let touchEndX = 0;
+
+    document.addEventListener('touchstart', e => {
+        touchStartX = e.changedTouches[0].screenX;
+    }, false);
+
+    document.addEventListener('touchend', e => {
+        touchEndX = e.changedTouches[0].screenX;
+        handleSwipe();
+    }, false);
+
+    function handleSwipe() {
+        const swipeThreshold = 50;
+        if (touchEndX - touchStartX > swipeThreshold) {
+            // Swipe right - open sidebar
+            document.body.classList.add('sidebar-visible');
+            if (sidebar) sidebar.classList.add('visible');
+        } else if (touchStartX - touchEndX > swipeThreshold) {
+            // Swipe left - close sidebar
+            document.body.classList.remove('sidebar-visible');
+            if (sidebar) sidebar.classList.remove('visible');
+        }
+    }
+});
+
 // Add feature boxes to key features
 document.addEventListener('DOMContentLoaded', function() {
     const features = document.querySelectorAll('.content ul li strong');
@@ -147,4 +186,4 @@ document.addEventListener('DOMContentLoaded', function() {
     asciiBlocks.forEach(block => {
         block.parentElement.classList.add('ascii-diagram');
     });
-});
+});