From 093237aecb7f3d5cde793d12fd63b9ef9f4e2d0a Mon Sep 17 00:00:00 2001
From: fynks <75840152+fynks@users.noreply.github.com>
Date: Sun, 12 Oct 2025 18:21:31 +0500
Subject: [PATCH] feat: implement mobile navigation enhancements with close
 button and scroll locking

---
 dist/css/styles.css | 287 ++++++++++++++++++++++++++++++++------------
 dist/index.html     |  59 ++++++++-
 2 files changed, 265 insertions(+), 81 deletions(-)

diff --git a/dist/css/styles.css b/dist/css/styles.css
index 5dc8035..a49749a 100644
--- a/dist/css/styles.css
+++ b/dist/css/styles.css
@@ -328,7 +328,7 @@ button:focus-visible {
   overflow-x: hidden;
   position: relative;
   background: var(--bg-primary);
-  transition: background-color var(--transition-normal)
+  margin: var(--space-3xl) 0;
 }
 
 .container {
@@ -651,6 +651,14 @@ button:focus-visible {
   transition: width var(--transition-fast);
 }
 
+.nav-mobile-header {
+  display: none;
+}
+
+.nav-close {
+  display: none;
+}
+
 .nav-link:hover {
   color: var(--primary);
   background: var(--bg-secondary);
@@ -951,6 +959,23 @@ button:focus-visible {
 @media (max-width:900px) {
   .nav-dropdown {
     width: 100%;
+    display: block;
+    padding: var(--space-sm) var(--space-md);
+    border-radius: var(--radius-xl);
+    background: rgba(148, 163, 184, 0.12);
+    border: 1px solid var(--border-primary);
+    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.08);
+    position: relative;
+  }
+
+  .nav-dropdown + .nav-dropdown {
+    margin-top: var(--space-sm);
+  }
+
+  [data-theme="dark"] .nav-dropdown {
+    background: rgba(30, 41, 59, 0.6);
+    border-color: rgba(71, 85, 105, 0.8);
+    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
   }
   
   .nav-dropdown-trigger {
@@ -959,17 +984,27 @@ button:focus-visible {
     text-align: left;
     padding: var(--space-lg) var(--space-xl);
     border-radius: var(--radius-lg);
-    font-size: var(--text-base);
-    font-weight: var(--font-medium);
-    color: var(--text-secondary);
-    min-height: 44px;
+    font-size: clamp(1rem, 2.5vw, 1.05rem);
+    font-weight: 600;
+    color: var(--text-primary);
+    min-height: 48px;
+    background: transparent;
     -webkit-tap-highlight-color: transparent;
     touch-action: manipulation;
+    transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
   }
   
-  .nav-dropdown-trigger:hover {
+  .nav-dropdown-trigger:hover,
+  .nav-dropdown-trigger:focus-visible {
     color: var(--primary);
-    background: var(--bg-secondary);
+    background: rgba(99, 102, 241, 0.1);
+    box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.18);
+  }
+  
+  .nav-dropdown-trigger[aria-expanded="true"] {
+    color: var(--primary);
+    background: rgba(99, 102, 241, 0.12);
+    box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.25);
   }
   
   .nav-dropdown-menu {
@@ -986,44 +1021,52 @@ button:focus-visible {
     backdrop-filter: none;
     display: none;
     overflow: hidden;
-    /* Remove problematic animations */
-    transition: none;
-    will-change: auto;
-  }
-  
-  [data-theme="dark"] .nav-dropdown-menu {
-    background: transparent;
   }
   
   .nav-dropdown-trigger[aria-expanded="true"] + .nav-dropdown-menu {
-    display: block;
-    padding: var(--space-xs) 0 var(--space-md) var(--space-2xl);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xs);
+    padding: var(--space-sm) var(--space-lg) var(--space-lg);
     margin-top: var(--space-xs);
-    margin-left: var(--space-lg);
-    border-left: 2px solid var(--border-primary);
-    background: rgba(99, 102, 241, 0.02);
+    margin-left: 0;
+    border-left: none;
+    background: rgba(99, 102, 241, 0.08);
+    border-radius: var(--radius-lg);
   }
   
   [data-theme="dark"] .nav-dropdown-trigger[aria-expanded="true"] + .nav-dropdown-menu {
-    background: rgba(99, 102, 241, 0.03);
-    border-left-color: var(--border-secondary);
+    background: rgba(99, 102, 241, 0.16);
   }
   
   .nav-dropdown-item {
-    padding: var(--space-md) var(--space-xl);
-    font-size: var(--text-base);
-    min-height: 44px;
     display: flex;
     align-items: center;
-    -webkit-tap-highlight-color: transparent;
-    touch-action: manipulation;
-    transition: transform 0.2s ease, background 0.2s ease;
+    padding: var(--space-md) var(--space-lg);
+    color: var(--text-secondary);
+    border-radius: var(--radius-md);
+    font-size: var(--text-base);
+    font-weight: var(--font-medium);
+    transform: translateX(0);
+    transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
+  }
+  
+  .nav-dropdown-item + .nav-dropdown-item {
+    margin-top: var(--space-2xs);
   }
   
   .nav-dropdown-item:hover,
+  .nav-dropdown-item:focus-visible,
   .nav-dropdown-item:active {
+    background: rgba(255, 255, 255, 0.65);
+    color: var(--primary);
     transform: translateX(4px);
-    background: rgba(99, 102, 241, 0.05);
+  }
+  
+  [data-theme="dark"] .nav-dropdown-item:hover,
+  [data-theme="dark"] .nav-dropdown-item:focus-visible {
+    background: rgba(15, 23, 42, 0.65);
+    color: var(--primary-light);
   }
 }
 
@@ -1032,12 +1075,14 @@ button:focus-visible {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.4);
-  z-index: 90;
+  z-index: 120;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.3s ease, visibility 0.3s ease;
   pointer-events: none;
   -webkit-tap-highlight-color: transparent;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
 }
 
 .nav-open .nav-overlay {
@@ -1048,97 +1093,189 @@ button:focus-visible {
 
 /* ===== MOBILE NAVIGATION STYLES ===== */
 @media (max-width: 900px) {
-  /* Show nav toggle button */
   .nav-toggle {
     display: inline-flex;
     width: 48px !important;
     height: 48px !important;
   }
 
-  /* Hide nav by default on mobile */
   .header-nav {
     display: none;
     position: fixed;
-    top: var(--header-height);
-    right: 0;
-    width: min(340px, 85%);
-    height: calc(100vh - var(--header-height));
-    background: rgba(255, 255, 255, 0.98);
-    border-left: 1px solid var(--border-primary);
-    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
-    padding: var(--space-2xl) var(--space-xl) var(--space-3xl);
+    inset: 0;
+    padding: var(--space-3xl) var(--space-xl) var(--space-3xl);
+    padding-top: var(--space-3xl);
+    padding-top: calc(var(--space-3xl) + env(safe-area-inset-top));
+    background: linear-gradient(180deg, rgba(248, 250, 255, 0.96) 0%, rgba(255, 255, 255, 0.98) 55%, rgba(255, 255, 255, 0.94) 100%);
+    border: none;
+    box-shadow: none;
+    display: flex;
     flex-direction: column;
     gap: var(--space-sm);
     overflow-y: auto;
     overflow-x: hidden;
     overscroll-behavior: contain;
     -webkit-overflow-scrolling: touch;
-    transform: translateX(100%);
-    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    z-index: 100;
+    transform: translateX(105%);
+    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
+    z-index: 140;
     will-change: transform;
+    backdrop-filter: blur(18px);
+    -webkit-backdrop-filter: blur(18px);
+  }
+
+  .header-nav::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background: radial-gradient(120% 120% at 50% 0%, rgba(99, 102, 241, 0.08) 0%, rgba(59, 130, 246, 0.04) 45%, rgba(15, 23, 42, 0) 100%);
+    z-index: -1;
+  }
+
+  [data-theme="dark"] .header-nav {
+    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, rgba(15, 23, 42, 0.98) 60%, rgba(15, 23, 42, 0.94) 100%);
+    box-shadow: none;
+  }
+
+  [data-theme="dark"] .header-nav::before {
+    background: radial-gradient(120% 120% at 50% 0%, rgba(37, 99, 235, 0.2) 0%, rgba(59, 130, 246, 0.12) 45%, rgba(15, 23, 42, 0) 100%);
   }
 
-  /* Show nav when open */
   .nav-open .header-nav {
     display: flex;
     transform: translateX(0);
   }
 
-  /* Dark theme mobile nav */
-  [data-theme="dark"] .header-nav {
-    background: rgba(15, 23, 42, 0.98);
-    border-color: rgba(52, 65, 85, 0.6);
-    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
-  }
-
-  /* Prevent body scroll when nav is open */
   body.nav-open {
     overflow: hidden;
-    position: fixed;
-    width: 100%;
   }
 
-  /* Mobile nav links */
-  .nav-open .nav-link {
-    font-size: var(--text-base);
-    padding: var(--space-lg) var(--space-xl);
-    width: 100%;
-    text-align: left;
-    border-radius: var(--radius-lg);
-    min-height: 44px;
+  .nav-mobile-header {
     display: flex;
     align-items: center;
-    -webkit-tap-highlight-color: transparent;
-    touch-action: manipulation;
+    justify-content: space-between;
+    gap: var(--space-lg);
+    padding: 0 0 var(--space-xl);
+    margin-bottom: var(--space-lg);
+    border-bottom: 1px solid rgba(148, 163, 184, 0.4);
   }
 
-  .nav-open .nav-link::before {
+  [data-theme="dark"] .nav-mobile-header {
+    border-bottom-color: rgba(71, 85, 105, 0.4);
+  }
+
+  .nav-mobile-brand {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2xs);
+  }
+
+  .nav-mobile-title {
+    font-size: clamp(1rem, 2.8vw, 1.15rem);
+    font-weight: 600;
+    color: var(--text-primary);
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  .nav-mobile-subtitle {
+    font-size: var(--text-sm);
+    color: var(--text-secondary);
+  }
+
+  .nav-close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 44px;
+    height: 44px;
+    border-radius: var(--radius-full);
+    border: 1px solid rgba(148, 163, 184, 0.5);
+    background: rgba(255, 255, 255, 0.92);
+    color: var(--text-primary);
+    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.12);
+    transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
+  }
+
+  .nav-close:hover,
+  .nav-close:focus-visible {
+    transform: scale(1.05);
+    background: rgba(255, 255, 255, 1);
+    border-color: rgba(99, 102, 241, 0.55);
+  }
+
+  [data-theme="dark"] .nav-close {
+    background: rgba(30, 41, 59, 0.9);
+    border-color: rgba(71, 85, 105, 0.7);
+    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.4);
+    color: var(--text-primary);
+  }
+
+  [data-theme="dark"] .nav-close:hover,
+  [data-theme="dark"] .nav-close:focus-visible {
+    border-color: rgba(147, 197, 253, 0.6);
+  }
+
+  .nav-close svg {
+    pointer-events: none;
+  }
+
+  .nav-open a.nav-link {
+    width: 100%;
+    justify-content: space-between;
+    font-size: clamp(1.05rem, 3vw, 1.2rem);
+    font-weight: 600;
+    padding: var(--space-lg) var(--space-xl);
+    border-radius: var(--radius-xl);
+    min-height: 52px;
+    background: rgba(99, 102, 241, 0.1);
+    color: var(--text-primary);
+    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
+    margin-bottom: var(--space-sm);
+    text-align: left;
+  }
+
+  .nav-open a.nav-link:hover,
+  .nav-open a.nav-link:focus-visible {
+    background: rgba(99, 102, 241, 0.18);
+    color: var(--primary);
+    box-shadow: 0 20px 42px rgba(15, 23, 42, 0.16);
+  }
+
+  [data-theme="dark"] .nav-open a.nav-link {
+    background: rgba(59, 130, 246, 0.18);
+    color: var(--text-primary);
+    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
+  }
+
+  [data-theme="dark"] .nav-open a.nav-link:hover,
+  [data-theme="dark"] .nav-open a.nav-link:focus-visible {
+    background: rgba(59, 130, 246, 0.26);
+    color: var(--primary-light);
+  }
+
+  .nav-open .nav-link::before,
+  .nav-open .nav-link::after {
     display: none;
   }
 
-  .nav-open .nav-link::after {
-    border-radius: var(--radius-lg);
-  }
-
-  /* Dark mode toggle positioning on mobile */
   .dark-mode-toggle {
     display: flex;
     flex: 0 0 auto;
     width: 40px !important;
     height: 40px !important;
     order: 3;
-    align-self: center;
-    z-index: 110;
+    align-self: flex-start;
+    margin-left: auto;
+    z-index: 150;
   }
 
-  /* Nav toggle sizing */
   .nav-toggle {
     width: 40px !important;
     height: 40px !important;
   }
 
-  /* Disable transitions before JS is ready */
   body:not(.js-ready) .header-nav,
   body:not(.js-ready) .nav-toggle-bar,
   body:not(.js-ready) .nav-overlay {
@@ -1893,7 +2030,7 @@ table button:focus-visible {
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-sm);
   border: 1px solid var(--border-primary);
-  margin: var(--space-3xl) 0;
+  margin: var(--space-xl) 0;
   overflow: hidden;
   width: 100%
 }
@@ -1972,8 +2109,6 @@ th {
   align-items: center
 }
 
-/* Legacy support - removed duplicate enhanced resource styles and newsletter form */
-
 .social-btn,
 .github-link {
   width: 36px;
diff --git a/dist/index.html b/dist/index.html
index c4b0fff..90f59c5 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -459,6 +459,17 @@
                     </a>
                     <nav id="primary-navigation" class="header-nav" aria-label="Main navigation" aria-hidden="true"
                         role="navigation">
+                        <div class="nav-mobile-header">
+                            <div class="nav-mobile-brand">
+                                <span class="nav-mobile-title">Menu</span>
+                                <span class="nav-mobile-subtitle">Jump to a section</span>
+                            </div>
+                            <button class="nav-close" id="navClose" type="button" aria-label="Close navigation menu">
+                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+                                    <use href="#icon-close" />
+                                </svg>
+                            </button>
+                        </div>
                         <a href="#what-are-debrid-services" class="nav-link">
                             <span class="nav-link-text">Intro</span>
                         </a>
@@ -555,8 +566,7 @@
                             Compare Premium <span class="gradient-text">Debrid Services</span>
                         </h1>
                         <p class="hero-description">
-                            Compare pricing, features, and 400+ file hosts across 9 premium debrid services in real-time. 
-                            Make informed decisions with our comprehensive comparison tool.
+                            Compare pricing, features, policies & 400+ file hosts across 10 premium debrid services in real-time.
                         </p>
                         <div class="hero-actions">
                             <a href="#debrid-pricing-comparison" class="btn btn-primary">
@@ -568,7 +578,7 @@
                         </div>
                         <div class="hero-stats" aria-label="Key stats">
                             <div class="stat-item">
-                                <span class="stat-number">9</span>
+                                <span class="stat-number">10</span>
                                 <span class="stat-label">Services</span>
                             </div>
                             <div class="stat-item">
@@ -1747,9 +1757,39 @@
                 navToggle: document.getElementById('navToggle'),
                 nav: document.getElementById('primary-navigation'),
                 navOverlay: document.getElementById('navOverlay'),
+                navClose: document.getElementById('navClose'),
                 darkModeToggle: document.getElementById('darkModeToggle'),
                 dropdownTriggers: []
             };
+
+            let scrollPosition = 0;
+
+            const lockScroll = () => {
+                if (!elements.body) return;
+                scrollPosition = window.scrollY || window.pageYOffset || document.documentElement.scrollTop || 0;
+                elements.body.dataset.navScrollLock = String(scrollPosition);
+                elements.body.style.top = `-${scrollPosition}px`;
+                elements.body.style.position = 'fixed';
+                elements.body.style.width = '100%';
+                elements.body.style.overflow = 'hidden';
+                elements.body.style.touchAction = 'none';
+                elements.body.style.left = '0';
+                elements.body.style.right = '0';
+            };
+
+            const unlockScroll = () => {
+                if (!elements.body) return;
+                const saved = Number(elements.body.dataset.navScrollLock || scrollPosition || 0);
+                elements.body.style.removeProperty('top');
+                elements.body.style.removeProperty('position');
+                elements.body.style.removeProperty('width');
+                elements.body.style.removeProperty('overflow');
+                elements.body.style.removeProperty('touch-action');
+                elements.body.style.removeProperty('left');
+                elements.body.style.removeProperty('right');
+                delete elements.body.dataset.navScrollLock;
+                requestAnimationFrame(() => window.scrollTo(0, saved));
+            };
             
             // Check if mobile
             const checkMobile = () => window.innerWidth <= 900;
@@ -1769,13 +1809,15 @@
             
             // Open mobile navigation
             const openNav = () => {
-                if (!elements.nav || state.isOpen) return;
+                if (!elements.nav || state.isOpen || !state.isMobile) return;
                 
                 state.isOpen = true;
+                lockScroll();
                 elements.body.classList.add('nav-open');
                 
                 if (elements.navToggle) {
                     elements.navToggle.setAttribute('aria-expanded', 'true');
+                    elements.navToggle.setAttribute('aria-label', 'Close navigation menu');
                 }
                 
                 if (elements.navOverlay) {
@@ -1788,7 +1830,6 @@
                 }
             };
             
-            // Close mobile navigation
             const closeNav = () => {
                 if (!elements.nav || !state.isOpen) return;
                 
@@ -1797,6 +1838,7 @@
                 
                 if (elements.navToggle) {
                     elements.navToggle.setAttribute('aria-expanded', 'false');
+                    elements.navToggle.setAttribute('aria-label', 'Open navigation menu');
                 }
                 
                 if (elements.navOverlay) {
@@ -1810,6 +1852,7 @@
                 
                 // Close all dropdowns when closing nav
                 closeAllDropdowns();
+                unlockScroll();
             };
             
             // Toggle navigation
@@ -1883,6 +1926,12 @@
                         toggleNav();
                     }, { passive: false });
                 }
+
+                if (elements.navClose) {
+                    elements.navClose.addEventListener('click', () => {
+                        closeNav();
+                    }, { passive: true });
+                }
                 
                 // Overlay click handler
                 if (elements.navOverlay) {