templates/components/nav.html

@@ -36,9 +36,10 @@
       </button>
     </div>
   </div>
+</nav>
 
-  <!-- Mobile Menu -->
+<!-- Mobile Menu (outside <nav> to avoid duplicate form[data-newsletter-form] in nav scope) -->
-  <div id="mobile-menu" class="md:hidden hidden border-t border-zinc-200 dark:border-zinc-800 bg-brand-light/95 dark:bg-brand-dark/95 backdrop-blur-md">
+<div id="mobile-menu" class="md:hidden hidden sticky top-20 z-40 border-b border-zinc-200 dark:border-zinc-800 bg-brand-light/95 dark:bg-brand-dark/95 backdrop-blur-md">
   <div class="max-w-7xl mx-auto px-6 py-4 flex flex-col gap-4">
     <a href="/" class="font-medium py-2 hover:text-brand-cyan transition-colors">Home</a>
     <a href="/articles/" class="font-medium py-2 hover:text-brand-cyan transition-colors">Articles</a>
@@ -53,8 +54,7 @@
       <p data-newsletter-message aria-live="polite" class="font-mono text-xs text-brand-cyan min-h-[1rem]"></p>
     </form>
   </div>
-  </div>
+</div>
-</nav>
 
 <script nonce="{{ request.csp_nonce|default:'' }}">
 (function(){
@@ -62,8 +62,9 @@
   var menu = document.getElementById('mobile-menu');
   if (btn && menu) {
     btn.addEventListener('click', function(){
-      var open = menu.classList.toggle('hidden');
+      var isOpen = !menu.classList.contains('hidden');
-      btn.setAttribute('aria-expanded', String(!open));
+      menu.classList.toggle('hidden');
+      btn.setAttribute('aria-expanded', String(!isOpen));
     });
   }
 })();