Merge pull request #521 from Yeghro/mobile

Mobile UX improvements

script.js

@@ -1,6 +1,13 @@
-// Dark mode toggle
+// Move these declarations to the very top of the file
 const darkModeToggle = document.getElementById('darkModeToggle');
+const menuToggle = document.getElementById('menuToggle');
+const sidebar = document.querySelector('.sidebar');
 const body = document.body;
+let touchStartX = 0;
+let touchEndX = 0;
+let touchStartY = 0;
+let touchEndY = 0;
+let isSwiping = false;
 
 // Color theme definitions
 const colorThemes = {
@@ -142,59 +149,204 @@ const colorThemes = {
     }
 };
 
-// Initialize theme from localStorage or system preference
+// Initialize all UI controls
 document.addEventListener('DOMContentLoaded', () => {
+    // Dark mode initialization
     const savedTheme = localStorage.getItem('theme');
     if (savedTheme) {
         body.dataset.theme = savedTheme;
     } else {
-        // Check system preference if no saved theme
         const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
         body.dataset.theme = prefersDark ? 'dark' : 'light';
         localStorage.setItem('theme', body.dataset.theme);
     }
     
-    // Update toggle button icon
+    // Update dark mode toggle button icon
-    darkModeToggle.innerHTML = body.dataset.theme === 'dark' 
+    updateDarkModeIcon();
-        ? '<i class="fas fa-sun"></i>' 
-        : '<i class="fas fa-moon"></i>';
 
+    // Dark mode toggle event listener
+    darkModeToggle.addEventListener('click', () => {
+        body.dataset.theme = body.dataset.theme === 'dark' ? 'light' : 'dark';
+        localStorage.setItem('theme', body.dataset.theme);
+        updateDarkModeIcon();
+        
+        // Reapply color theme when switching dark/light mode
+        const currentColorTheme = localStorage.getItem('colorTheme') || 'default';
+        applyColorTheme(currentColorTheme);
+    });
+
+    // Color theme initialization
     const colorThemeSelect = document.getElementById('colorThemeSelect');
-    
-    // Initialize theme from localStorage
     const savedColorTheme = localStorage.getItem('colorTheme') || 'default';
     colorThemeSelect.value = savedColorTheme;
     applyColorTheme(savedColorTheme);
     
-    // Handle theme changes
+    // Color theme change event listener
     colorThemeSelect.addEventListener('change', (e) => {
         const selectedTheme = e.target.value;
         localStorage.setItem('colorTheme', selectedTheme);
         applyColorTheme(selectedTheme);
     });
+
+    // Test if marked is loaded
+    if (typeof marked === 'undefined') {
+        console.error('marked.js is not loaded!');
+        document.getElementById('resources-container').innerHTML = `
+            <div class="error-message">
+                Error: marked.js library is not loaded properly.
+            </div>`;
+        return;
+    }
+
+    // If everything is working, proceed with main functionality
+    parseAndDisplayContent()
+        .then(() => console.log('Content successfully parsed and displayed'))
+        .catch(error => {
+            console.error('Error in main content processing:', error);
+            document.getElementById('resources-container').innerHTML = `
+                <div class="error-message">
+                    Error loading content: ${error.message}
+                </div>`;
+        });
+
+    // Ensure we're working with valid elements
+    if (!sidebar || !menuToggle) {
+        console.error('Required elements not found');
+        return;
+    }
+
+    // Single function to handle sidebar state
+    const toggleSidebar = (show) => {
+        if (show === undefined) {
+            sidebar.classList.toggle('active');
+        } else {
+            sidebar.classList[show ? 'add' : 'remove']('active');
+        }
+        // Update aria-expanded state
+        menuToggle.setAttribute('aria-expanded', sidebar.classList.contains('active'));
+    };
+
+    // Menu toggle click handler
+    menuToggle.addEventListener('click', (e) => {
+        e.stopPropagation();
+        toggleSidebar();
+    });
+
+    // Delegate sidebar link clicks using event delegation
+    document.querySelector('.nav-links').addEventListener('click', (e) => {
+        const link = e.target.closest('a');
+        if (!link) return;
+
+        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) {
+            toggleSidebar(false);
+        }
+    });
+
+    // Touch handling
+    let touchStartX = 0;
+    let touchStartY = 0;
+    let touchEndX = 0;
+    let touchEndY = 0;
+    let isSwiping = false;
+
+    const handleTouchStart = (e) => {
+        touchStartX = e.touches[0].clientX;
+        touchStartY = e.touches[0].clientY;
+        isSwiping = true;
+    };
+
+    const handleTouchMove = (e) => {
+        if (!isSwiping) return;
+        
+        touchEndX = e.touches[0].clientX;
+        touchEndY = e.touches[0].clientY;
+
+        const deltaX = touchStartX - touchEndX;
+        const deltaY = Math.abs(touchStartY - touchEndY);
+
+        if (deltaY > Math.abs(deltaX)) {
+            isSwiping = false;
+            return;
+        }
+
+        if (Math.abs(deltaX) > 10) {
+            e.preventDefault();
+        }
+    };
+
+    const handleTouchEnd = () => {
+        if (!isSwiping) return;
+        
+        const deltaX = touchStartX - touchEndX;
+        const deltaY = Math.abs(touchStartY - touchEndY);
+        const swipeThreshold = 50;
+
+        if (Math.abs(deltaX) > swipeThreshold && deltaY < 100) {
+            toggleSidebar(deltaX < 0);
+        }
+        
+        isSwiping = false;
+    };
+
+    // Add touch event listeners
+    document.addEventListener('touchstart', handleTouchStart, { passive: true });
+    document.addEventListener('touchmove', handleTouchMove, { passive: false });
+    document.addEventListener('touchend', handleTouchEnd, { passive: true });
+
+    // Close sidebar when clicking outside
+    document.addEventListener('click', (e) => {
+        if (window.innerWidth <= 768 && 
+            !sidebar.contains(e.target) && 
+            !menuToggle.contains(e.target) && 
+            sidebar.classList.contains('active')) {
+            toggleSidebar(false);
+        }
+    });
+
+    // Handle window resize
+    let resizeTimer;
+    window.addEventListener('resize', () => {
+        clearTimeout(resizeTimer);
+        resizeTimer = setTimeout(() => {
+            if (window.innerWidth > 768) {
+                toggleSidebar(true);
+            } else {
+                toggleSidebar(false);
+            }
+        }, 250);
+    });
 });
 
-darkModeToggle.addEventListener('click', () => {
+// Helper function to update dark mode icon
-    const newTheme = body.dataset.theme === 'dark' ? 'light' : 'dark';
+function updateDarkModeIcon() {
-    body.dataset.theme = newTheme;
+    darkModeToggle.innerHTML = body.dataset.theme === 'dark' 
-    localStorage.setItem('theme', newTheme);
-    
-    darkModeToggle.innerHTML = newTheme === 'dark' 
         ? '<i class="fas fa-sun"></i>' 
         : '<i class="fas fa-moon"></i>';
+}
 
-    // Reapply color theme with new dark/light mode
+function handleSwipe() {
-    const currentColorTheme = localStorage.getItem('colorTheme') || 'default';
+    const swipeThreshold = 100;
-    applyColorTheme(currentColorTheme);
+    const swipeDistance = touchStartX - touchEndX;
-});
     
-// Mobile menu toggle
+    if (swipeDistance > swipeThreshold && sidebar.classList.contains('active')) {
-const menuToggle = document.getElementById('menuToggle');
+        sidebar.classList.remove('active');
-const sidebar = document.querySelector('.sidebar');
+    }
-
+}
-menuToggle.addEventListener('click', () => {
-    sidebar.classList.toggle('active');
-});
 
 // Search functionality
 const searchInput = document.getElementById('search');
@@ -655,33 +807,6 @@ function generateNavigation(sectionNames) {
     }
 }
 
-// Remove the old fetch call and replace with this initialization
-document.addEventListener('DOMContentLoaded', () => {
-    // Test if marked is loaded
-    if (typeof marked === 'undefined') {
-        console.error('marked.js is not loaded!');
-        document.getElementById('resources-container').innerHTML = `
-            <div class="error-message">
-                Error: marked.js library is not loaded properly.
-            </div>`;
-        return;
-    }
-
-    // Test marked with a simple markdown string
-    console.log('marked.js test:', marked.parse('# Test\nThis is a *test* of **marked.js**'));
-
-    // If everything is working, proceed with main functionality
-    parseAndDisplayContent()
-        .then(() => console.log('Content successfully parsed and displayed'))
-        .catch(error => {
-            console.error('Error in main content processing:', error);
-            document.getElementById('resources-container').innerHTML = `
-                <div class="error-message">
-                    Error loading content: ${error.message}
-                </div>`;
-        });
-});
-
 async function parseAndDisplayContent() {
     try {
         const response = await fetch('./README.md');

styles.css

@@ -36,7 +36,7 @@ body {
 .container {
     display: flex;
     min-height: 100vh;
-    margin-top: 60px; /* Height of top nav */
+    margin-top: 0; /* Remove this as we're using padding-top in main-content */
 }
 
 /* Sidebar Styles */
@@ -50,7 +50,12 @@ body {
     transition: transform 0.3s ease;
     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 */
+    top: 60px; /* Align with top nav */
+    touch-action: pan-y pinch-zoom;
+    will-change: transform;
+    -webkit-overflow-scrolling: touch;
+    overscroll-behavior: contain;
+    padding-top: 1rem; /* Add some padding at the top */
 }
 
 .sidebar-header {
@@ -154,10 +159,13 @@ body {
 .main-content {
     margin-left: 280px;
     padding: 2rem;
+    padding-top: 80px; /* Increased padding-top to account for fixed nav */
     flex: 1;
     min-height: 100vh;
     overflow: auto;
     margin-top: 0;
+    -webkit-overflow-scrolling: touch;
+    overscroll-behavior: contain;
 }
 
 .content-header {
@@ -254,16 +262,22 @@ body {
 /* Responsive Design */
 @media (max-width: 768px) {
     .sidebar {
-        transform: translateX(-100%);
+        transform: translateX(-100%); /* Start off-screen */
+        position: fixed;
         z-index: 1000;
+        touch-action: pan-y pinch-zoom;
+        will-change: transform;
+        transition: transform 0.3s ease;
     }
     
     .sidebar.active {
         transform: translateX(0);
+        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
     }
 
     .main-content {
         margin-left: 0;
+        padding-top: 100px; /* Increase padding-top for mobile to account for wrapped nav elements */
     }
 
     .menu-toggle {
@@ -277,6 +291,7 @@ body {
     .nav-content {
         flex-wrap: wrap;
         gap: 0.5rem;
+        padding: 0.5rem 3.5rem;
     }
     
     .nav-content h1 {
@@ -290,6 +305,34 @@ body {
         width: 100%;
         max-width: none;
         margin-top: 0.5rem;
+        margin-bottom: 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;
     }
 }
 
@@ -419,8 +462,13 @@ body {
     color: #f1c40f;
 }
 
+/* Update resource container header styles */
 #resources-container h2 {
     color: var(--primary-color);
+    margin-top: 1rem;    /* Add top margin to push content down */
+    padding-top: 1rem;   /* Add padding to create more space */
+    position: relative;  /* Ensure it's positioned relative to its container */
+    z-index: 1;         /* Keep it above other content but below the nav */
 }
 
 /* Main content scrollbar styles */
@@ -505,11 +553,11 @@ button:focus {
     margin-top: auto;
 }
 
-/* Add top navigation styles */
+/* Update top navigation styles */
 .top-nav {
     background-color: var(--primary-color);
     color: white;
-    padding: 1rem;
+    padding: 0.75rem;
     position: fixed;
     top: 0;
     left: 0;
@@ -571,12 +619,10 @@ button:focus {
 }
 
 .logo-container {
-    height: 50px;
+    height: 40px;
-    width: 200px; /* Adjust this value to your preferred width */
+    width: 160px;
     display: flex;
     align-items: center;
-    justify-content: center;
-    overflow: hidden;
 }
 
 .nav-logo {
@@ -585,61 +631,103 @@ button:focus {
     object-fit: cover; /* This will maintain aspect ratio while fitting within the container */
 }
 
-/* Adjust container size for mobile */
+/* Update responsive styles */
 @media (max-width: 768px) {
+    .nav-content {
+        padding: 0 3.5rem; /* Make space for menu toggle */
+    }
+
+    .menu-toggle {
+        top: 12px; /* Adjust position to align with nav */
+        left: 12px;
+    }
+
+    /* Adjust logo size for mobile */
     .logo-container {
-        height: 40px;
+        height: 32px;
-        width: 160px; /* Proportionally smaller for mobile */
+        width: 120px;
     }
 
-    .nav-content h1 {
+    /* Make search more compact on mobile */
-        width: auto;
+    .search-box {
-        text-align: left;
+        max-width: 160px;
+    }
+
+    .search-box input {
+        padding: 0.4rem 1.8rem 0.4rem 0.8rem;
+        font-size: 0.9rem;
+    }
+
+    /* Adjust theme controls for mobile */
+    .theme-controls {
+        display: flex;
+        gap: 0.5rem;
+    }
+
+    .theme-select {
+        max-width: 100px;
+        font-size: 0.8rem;
+        padding: 0.3rem;
+    }
+
+    .theme-toggle {
+        padding: 0.3rem;
+        font-size: 1rem;
     }
 }
 
-.sidebar h2:first-of-type {
+/* Extra small screens */
-    margin-top: 80px; /* Increased spacing from top nav */
+@media (max-width: 480px) {
-    font-weight: 400; /* Reduced from default bold/600 to normal/400 */
+    .nav-content {
-}
+        flex-wrap: wrap;
+        gap: 0.5rem;
+        padding: 0 3rem;
+    }
 
-/* Adjust for mobile if needed */
+    .logo-container {
-@media (max-width: 768px) {
+        order: 1;
-    .sidebar h2:first-of-type {
+        height: 28px;
-        margin-top: 70px; /* Slightly less space on mobile */
+        width: 100px;
+    }
+
+    .search-box {
+        order: 3;
+        width: 100%;
+        max-width: none;
+        margin-top: 0.3rem;
+    }
+
+    .theme-controls {
+        order: 2;
+    }
+
+    .theme-select {
+        max-width: 90px;
+    }
+
+    .main-content {
+        padding-top: 120px; /* Further increase padding-top for very small screens */
     }
 }
 
-/* Update menu toggle button styles */
+/* Update menu toggle position */
 .menu-toggle {
     display: none;
-    background: none;
-    border: none;
-    color: var(--text-color);
-    font-size: 1.2rem; /* Reduced from 1.5rem */
-    cursor: pointer;
-    padding: 0.4rem 0.6rem; /* Adjusted padding */
     position: fixed;
-    top: 15px; /* Align with top nav content */
+    top: 12px;
-    left: 15px;
+    left: 12px;
     z-index: 1002;
     background-color: var(--primary-color);
-    border-radius: 4px;
     color: white;
+    border: none;
+    border-radius: 4px;
+    padding: 0.4rem 0.6rem;
+    cursor: pointer;
+    font-size: 1.1rem;
     box-shadow: 0 1px 3px rgba(0,0,0,0.2);
     transition: all 0.2s ease;
 }
 
-.menu-toggle:hover {
-    background-color: var(--hover-color);
-    transform: scale(1.05);
-}
-
-.menu-toggle:active {
-    transform: scale(0.95);
-}
-
-/* Update mobile responsive styles */
 @media (max-width: 768px) {
     .menu-toggle {
         display: flex;
@@ -647,12 +735,18 @@ button:focus {
         justify-content: center;
     }
 
-    /* Adjust top nav padding to accommodate menu toggle */
+    .sidebar {
-    .nav-content {
+        transform: translateX(-100%);
-        padding-left: 3.5rem; /* Make room for menu toggle */
     }
 
-    /* Rest of your mobile styles... */
+    .sidebar.active {
+        transform: translateX(0);
+    }
+
+    .main-content {
+        margin-left: 0;
+        width: 100%;
+    }
 }
 
 /* Theme selector styles */
@@ -698,3 +792,20 @@ button:focus {
         padding: 0.3rem 0.6rem;
     }
 }
+
+/* Adjust responsive spacing */
+@media (max-width: 768px) {
+    .main-content {
+        padding-top: 120px;  /* Increase padding further */
+    }
+    
+    #resources-container h2 {
+        margin-top: 0.5rem;  /* Adjust margin for mobile */
+    }
+}
+
+@media (max-width: 480px) {
+    .main-content {
+        padding-top: 140px;  /* Even more padding for smallest screens */
+    }
+}