Alpine.js for public site interactivity (dropdowns, mobile nav)

[mattstratton]

Context

PRD §8 — The public site needs lightweight interactivity for dropdowns, modals, and mobile navigation without a heavy JS framework.

Requirements

• Alpine.js for interactive UI sprinkles on public pages
• Mobile hamburger menu with slide-out nav
• Dropdown menus (if needed for year/city filter)
• Accessible modal dialogs (for image lightbox, etc.)
• Keep it minimal — public pages should work without JS

Current State

• No Alpine.js or any JS interactivity on public pages
• No mobile navigation menu
• Tailwind CDN loaded but no JS framework

Implementation Notes

• Load Alpine.js via CDN or bundle with Vite
• Use `x-data`, `x-show`, `x-transition` for interactive elements
• Keep progressive enhancement in mind: core content accessible without JS

Acceptance Criteria

• Mobile navigation menu works
• Interactive elements are accessible (keyboard, screen reader)
• Pages functional without JavaScript (graceful degradation)
• Alpine.js loaded efficiently (< 15KB gzipped)

References

• PRD §8 — Alpine.js recommendation
• `templates/public/base.html`