Saltearse al contenido
Astro Astro

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.

  1. Crea un archivo llamado Hamburger.astro en src/components/.

  2. 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>

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

    ¡Enséñame el código!
    src/components/Header.astro
    ---
    import Hamburger from './Hamburger.astro';
    import Navigation from './Navigation.astro';
    ---
    <header>
      <nav>
        <Hamburger />
        <Navigation />
      </nav>
    </header>

  4. Añade los siguientes estilos para tu componente Hamburger:

    src/styles/global.css
    /* 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

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

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

  2. 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.

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

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

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

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

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

  3. 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.

  4. 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

  1. ¿Cuándo ejecuta Astro cualquier JavaScript escrito en el frontmatter de un componente?

  2. Opcionalmente, Astro puede enviar JavaScript al navegador para permitir:

  3. El JavaScript del lado del cliente se enviará al navegador del usuario cuando se escriba o importe:

Checklist

Recursos

Scripts del lado del cliente en Astro