From 82c34be52bad1a385b9826fc5c9d9a5dd1cfdc15 Mon Sep 17 00:00:00 2001
From: Yeghro <130201060+Yeghro@users.noreply.github.com>
Date: Sat, 25 Jan 2025 12:12:52 -0800
Subject: [PATCH] more familiar mobile touch XP

---
 script.js  | 83 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 styles.css | 32 ++++++++++++++++++++-
 2 files changed, 114 insertions(+), 1 deletion(-)

diff --git a/script.js b/script.js
index 8e7b46c..9298b3a 100644
--- a/script.js
+++ b/script.js
@@ -6,6 +6,8 @@ const body = document.body;
 let touchStartX = 0;
 let touchEndX = 0;
 let touchStartY = 0;
+let touchEndY = 0;
+let isSwiping = false;
 
 // Color theme definitions
 const colorThemes = {
@@ -206,6 +208,87 @@ document.addEventListener('DOMContentLoaded', () => {
                     Error loading content: ${error.message}
                 </div>`;
         });
+
+    // Enhanced touch handling for sidebar
+    touchStartX = 0;
+    touchStartY = 0;
+    touchEndX = 0;
+    touchEndY = 0;
+    isSwiping = false;
+
+    // Track touch movements
+    document.addEventListener('touchstart', (e) => {
+        touchStartX = e.touches[0].clientX;
+        touchStartY = e.touches[0].clientY;
+        isSwiping = true;
+    }, { passive: true });
+
+    document.addEventListener('touchmove', (e) => {
+        if (!isSwiping) return;
+        
+        touchEndX = e.touches[0].clientX;
+        touchEndY = e.touches[0].clientY;
+
+        // Calculate vertical and horizontal distance
+        const deltaX = touchStartX - touchEndX;
+        const deltaY = Math.abs(touchStartY - touchEndY);
+
+        // If vertical scrolling is more prominent, don't handle swipe
+        if (deltaY > Math.abs(deltaX)) {
+            isSwiping = false;
+            return;
+        }
+
+        // Prevent default only if horizontal swipe is significant
+        if (Math.abs(deltaX) > 10) {
+            e.preventDefault();
+        }
+    }, { passive: false });
+
+    document.addEventListener('touchend', () => {
+        if (!isSwiping) return;
+        
+        const deltaX = touchStartX - touchEndX;
+        const deltaY = Math.abs(touchStartY - touchEndY);
+        const swipeThreshold = 50;
+
+        // Only handle horizontal swipes
+        if (Math.abs(deltaX) > swipeThreshold && deltaY < 100) {
+            if (deltaX > 0) {
+                // Swipe left - close sidebar
+                sidebar.classList.remove('active');
+            } else {
+                // Swipe right - open sidebar
+                sidebar.classList.add('active');
+            }
+        }
+        
+        isSwiping = false;
+    }, { passive: true });
+
+    // Update sidebar link click handling
+    document.querySelectorAll('.nav-links a').forEach(link => {
+        link.addEventListener('click', (e) => {
+            e.preventDefault();
+            
+            // Remove active class from all links
+            document.querySelectorAll('.nav-links a').forEach(l => 
+                l.classList.remove('active')
+            );
+            
+            // Add active class to clicked link
+            link.classList.add('active');
+            
+            // Get section name and display it
+            const section = link.getAttribute('data-section');
+            displaySection(section, window.parsedResources);
+            
+            // Close sidebar on mobile
+            if (window.innerWidth <= 768) {
+                sidebar.classList.remove('active');
+            }
+        });
+    });
 });
 
 // Helper function to update dark mode icon
diff --git a/styles.css b/styles.css
index 327afec..49c9af4 100644
--- a/styles.css
+++ b/styles.css
@@ -51,9 +51,10 @@ body {
     border-right: 1px solid rgba(110, 84, 148, 0.15);
     box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
     top: 60px; /* Start below top nav */
-    touch-action: pan-y;
+    touch-action: pan-y pinch-zoom;
     will-change: transform;
     -webkit-overflow-scrolling: touch;
+    overscroll-behavior: contain;
 }
 
 .sidebar-header {
@@ -161,6 +162,8 @@ body {
     min-height: 100vh;
     overflow: auto;
     margin-top: 0;
+    -webkit-overflow-scrolling: touch;
+    overscroll-behavior: contain;
 }
 
 .content-header {
@@ -299,6 +302,33 @@ body {
         max-width: none;
         margin-top: 0.5rem;
     }
+
+    .nav-links a {
+        padding: 0.75rem 1rem; /* Larger touch target */
+        min-height: 44px; /* iOS recommended minimum */
+    }
+    
+    .theme-toggle,
+    .menu-toggle {
+        min-width: 44px;
+        min-height: 44px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    
+    /* Improve search input touch target */
+    .search-box input {
+        min-height: 44px;
+    }
+    
+    /* Add active state styles for touch feedback */
+    .nav-links a:active,
+    .theme-toggle:active,
+    .menu-toggle:active {
+        opacity: 0.7;
+        transition: opacity 0.1s;
+    }
 }
 
 .markdown-content {