Saltearse al contenido

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.

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;
    }
    }

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.

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>
  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:

Scripts del lado del cliente en Astro

Contribuir

¿Qué tienes en mente?

Comunidad