Envía tu primer script al navegador

Añadamos un botón para abrir y cerrar los enlaces en pantallas de dispositivos móviles, lo que requiere cierta interactividad con el cliente.

Prepárate para...

Crear un componente de menú
Escribir un <script> para que los visitantes de tu sitio puedan abrir y cerrar el menú de navegación
Mover tu JavaScript a un archivo .js.

Crea un componente <Menu /> para abrir y cerrar tu menú móvil.

Crea un archivo llamado Menu.astro en src/components/.
Copia el siguiente código en tu componente. Este crea un botón que se usará para alternar la visibilidad de los enlaces de navegación en dispositivos móviles. (Más adelante agregarás los nuevos estilos CSS en global.css.)
src/components/Menu.astro
```
---
---
<button aria-expanded="false" aria-controls="main-menu" class="menu">
  Menu
</button>
```

Coloca este nuevo componente <Menu /> justo antes de tu componente <Navigation /> en Header.astro.

¡Enséñame el código!

---
import Menu from './Menu.astro';
import Navigation from './Navigation.astro';
---
<header>
  <nav>
    <Menu />
    <Navigation />
  </nav>
</header>

Añade los siguientes estilos para tu componente menu, incluyendo algunos estilos responsivos:

/* estilos de la barra de navegación*/
.menu {
  background-color: #0d0950;
  border: none;
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  padding: 5px 10px;
}

.nav-links {
  width: 100%;
  display: none;
  margin: 0;
}

.nav-links a {
  display: block;
  text-align: center;
  padding: 10px 0;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: bold;
  text-transform: uppercase;
  color: #0d0950;
}

.nav-links a:hover,
.nav-links a:focus {
  background-color: #ff9776;
}

:has(.menu[aria-expanded="true"]) .nav-links {
  display: unset;
}

@media screen and (min-width: 636px) {
  .nav-links {
    margin-left: 5em;
    display: block;
    position: static;
    width: auto;
    background: none;
  }

  .nav-links a {
    display: inline-block;
    padding: 15px 20px;
  }

  .menu {
    display: none;
  }
}

Escribe tu primera etiqueta script

Tu encabezado aún no es interactivo porque no puede responder a la entrada del usuario, como hacer clic en el menú para mostrar u ocultar los enlaces de navegación.

La adición de una etiqueta <script> proporciona JavaScript del lado del cliente para “escuchar” un evento del usuario y luego responder en consecuencia

Añade la siguiente etiqueta <script> a index.astro, justo antes de la etiqueta de cierre </body>.

  <Footer />
  <script>
    const menu = document.querySelector('.menu');

    menu?.addEventListener('click', () => {
      const isExpanded = menu.getAttribute('aria-expanded') === 'true';
      menu.setAttribute('aria-expanded', `${!isExpanded}`);
    });
  </script>
</body>

Comprueba de nuevo la vista previa del navegador en varios tamaños y verifica que el menú de navegación funciona, que es responsivo al tamaño de la pantalla y que responde a las entradas del usuario en esta página.

Importa un archivo `.js`

En lugar de escribir JavaScript directamente en cada página, puedes mover el contenido de la etiqueta <script> a su propio archivo .js en el proyecto.

Crea src/scripts/menu.js (tendrás que crear una nueva carpeta /scripts/) y mueve tu JavaScript a ella.

const menu = document.querySelector('.menu');

menu?.addEventListener('click', () => {
  const isExpanded = menu.getAttribute('aria-expanded') === 'true';
  menu.setAttribute('aria-expanded', `${!isExpanded}`);
});

Sustituye el contenido de la etiqueta <script> en index.astro por la siguiente importación de archivos:

  <Footer />
  <script>
    const menu = document.querySelector('.menu');

    menu?.addEventListener('click', () => {
      const isExpanded = menu.getAttribute('aria-expanded') === 'true';
      menu.setAttribute('aria-expanded', `${!isExpanded}`);
    });

    import "../scripts/menu.js";
  </script>
</body>

Comprueba de nuevo la vista previa del navegador a un tamaño más pequeño y verifica que el menú todavía abre y cierra los enlaces de tu navegación.
Añade la misma etiqueta <script> con la importación a tus otras dos páginas, about.astro y blog.astro y comprueba que tienes un encabezado responsivo e interactivo en cada página.
src/pages/about.astro & src/pages/blog.astro
```
  <Footer />
  <script>
    import "../scripts/menu.js";
  </script>
</body>
```

Pon a prueba tus conocimientos

¿Cuándo ejecuta Astro cualquier JavaScript escrito en el frontmatter de un componente?
1. Astro nunca ejecuta JavaScript
2. en tiempo de compilación
3. Cuando un visitante pulsa un botón
Opcionalmente, Astro puede enviar JavaScript al navegador para permitir:
1. que los usuarios hagan clic en los enlaces de las páginas
2. tiempos de carga más rápidos
3. interactividad del lado del cliente
El JavaScript del lado del cliente se enviará al navegador del usuario cuando se escriba o importe:
1. en etiquetas <script>.
2. entre las vallas de código de un archivo .astro.
3. en global.css

Checklist

Puedo añadir interactividad del lado del cliente con JavaScript en una etiqueta <script>.
Puedo importar un archivo .js en una etiqueta <script>.