Envía tu primer script al navegador

Añadamos un menú hamburguesa 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ú de hamburguesa
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.

Construye un componente Hamburger

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

Crea un archivo llamado Hamburger.astro en src/components/.
Copia el siguiente código en tu componente. Esto representará tu menú “hamburguesa” de 3 líneas para abrir y cerrar tus enlaces de navegación en móvil. (Añadirás los nuevos estilos CSS a global.css más tarde).
src/components/Hamburger.astro
```
---
---
<div class="hamburger">
  <span class="line"></span>
  <span class="line"></span>
  <span class="line"></span>
</div>
```

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

¡Enséñame el código!

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

Añade los siguientes estilos para tu componente Hamburger:

/* estilos de la barra de navegación*/
.hamburger {
  padding-right: 20px;
  cursor: pointer;
}

.hamburger .line {
  display: block;
  width: 40px;
  height: 5px;
  margin-bottom: 10px;
  background-color: #ff9776;
}

.nav-links {
  width: 100%;
  top: 5rem;
  left: 48px;
  background-color: #ff9776;
  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;
}

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

.expanded {
  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;
  }

  .hamburger {
    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ú hamburguesa 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>
    document.querySelector('.hamburger').addEventListener('click', () => {
      document.querySelector('.nav-links').classList.toggle('expanded');
    });
  </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.

document.querySelector('.hamburger').addEventListener('click', () => {
  document.querySelector('.nav-links').classList.toggle('expanded');
});

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

  <Footer />
  <script>
    document.querySelector('.hamburger').addEventListener('click', () => {
      document.querySelector('.nav-links').classList.toggle('expanded');
    });

    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ú hamburguesa 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>.

Recursos

Scripts del lado del cliente en Astro