nohype/main-site
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: move mobile menu outside nav to prevent playwright strict mode violation
All checks were successful
CI / nightly-e2e (pull_request) Has been skipped
Details
CI / deploy (pull_request) Has been skipped
Details
CI / pr-e2e (pull_request) Successful in 1m4s
Details
CI / ci (pull_request) Successful in 1m23s
Details

Browse Source 
Playwright strict mode requires exactly one match for form[data-newsletter-form]
inside nav. Having desktop + mobile forms both inside <nav> caused a strict
violation. Mobile menu div is now outside the closing </nav> tag; JS toggle
uses getElementById so position doesn't matter.

Rebuild CSS to match template changes.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
codex_a
2026-03-01 10:43:17 +00:00
parent 8b83712cbf
commit bff59eec06
2 changed files with 22 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
templates/components/nav.html
View File

@@ -36,34 +36,35 @@
</button>
</div>
</div>
<!-- Mobile Menu -->
<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 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>
<a href="/about/" class="font-medium py-2 hover:text-brand-pink transition-colors">About</a>
<form method="post" action="/newsletter/subscribe/" data-newsletter-form class="space-y-2 pt-2 border-t border-zinc-200 dark:border-zinc-800" id="mobile-newsletter">
{% csrf_token %}
<input type="hidden" name="source" value="nav-mobile" />
<input type="email" name="email" required placeholder="dev@example.com"
class="w-full bg-transparent border border-zinc-300 dark:border-zinc-700 px-3 py-2 text-brand-dark dark:text-brand-light font-mono text-sm focus:outline-none focus:border-brand-pink transition-colors" />
<input type="text" name="honeypot" style="display:none" />
<button type="submit" class="w-full px-4 py-2.5 bg-brand-dark dark:bg-brand-light text-brand-light dark:text-brand-dark font-display font-bold transition-colors">Subscribe</button>
<p data-newsletter-message aria-live="polite" class="font-mono text-xs text-brand-cyan min-h-[1rem]"></p>
</form>
</div>
</div>
</nav>
<!-- Mobile Menu (outside <nav> to avoid duplicate form[data-newsletter-form] in nav scope) -->
<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>
<a href="/about/" class="font-medium py-2 hover:text-brand-pink transition-colors">About</a>
<form method="post" action="/newsletter/subscribe/" data-newsletter-form class="space-y-2 pt-2 border-t border-zinc-200 dark:border-zinc-800" id="mobile-newsletter">
{% csrf_token %}
<input type="hidden" name="source" value="nav-mobile" />
<input type="email" name="email" required placeholder="dev@example.com"
class="w-full bg-transparent border border-zinc-300 dark:border-zinc-700 px-3 py-2 text-brand-dark dark:text-brand-light font-mono text-sm focus:outline-none focus:border-brand-pink transition-colors" />
<input type="text" name="honeypot" style="display:none" />
<button type="submit" class="w-full px-4 py-2.5 bg-brand-dark dark:bg-brand-light text-brand-light dark:text-brand-dark font-display font-bold transition-colors">Subscribe</button>
<p data-newsletter-message aria-live="polite" class="font-mono text-xs text-brand-cyan min-h-[1rem]"></p>
</form>
</div>
</div>
<script nonce="{{ request.csp_nonce|default:'' }}">
(function(){
var btn = document.querySelector('[data-mobile-menu-toggle]');
var menu = document.getElementById('mobile-menu');
if (btn && menu) {
btn.addEventListener('click', function(){
var open = menu.classList.toggle('hidden');
btn.setAttribute('aria-expanded', String(!open));
var isOpen = !menu.classList.contains('hidden');
menu.classList.toggle('hidden');
btn.setAttribute('aria-expanded', String(!isOpen));
});
}
})();