// src/components/MobileMenu.jsx
import { useState } from 'react';

export default function MobileMenu() {
  const [open, setOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setOpen(!open)}>☰ Menu</button>
      {open && (
        <ul>
          <li>Home</li>
          <li>About</li>
          <li>Contact</li>
        </ul>
      )}
    </div>
  );
}

---
// src/pages/index.astro
import MobileMenu from '../components/MobileMenu.jsx';
---

<h1>Site Header</h1>
<MobileMenu client:media="(max-width: 768px)" />

<!--
  Notes:
  - client:media="(max-width: 768px)" only hydrates MobileMenu when
    that media query matches - the component never ships or runs
    its JavaScript on a wider viewport at all.
  - Resize your browser window (or use DevTools' device toolbar)
    below 768px width and reload: the ☰ button becomes interactive.
    Resize above 768px and reload again: the button renders as
    static, inert markup, since the media query no longer matches.
  - This is a genuinely different mechanism from a plain CSS media
    query hiding an already-hydrated component - here, the
    component's own JavaScript is never downloaded or executed at
    all outside the matching viewport.
-->