Aller au contenu

Envoyez votre premier script au navigateur

Ajoutons un menu hamburger pour ouvrir et fermer vos liens sur les écrans de taille mobile, nécessitant ainsi de l’interactivité côté client !

Préparez-vous à…

  • Créez un composant de menu hamburger
  • Rédigez un <script> pour permettre à vos visiteurs de site d’ouvrir et de fermer le menu de navigation
  • Déplacez votre JavaScript dans son fichier .js

Construire un composant Hamburger

Titre de la section Construire un composant Hamburger

Créez un composant <Hamburger /> pour ouvrir et fermer votre menu mobile.

  1. Créez un fichier nommé Hamburger.astro dans src/components/

  2. Copiez le code suivant dans votre composant. Cela représentera votre menu “hamburger” à 3 lignes pour ouvrir et fermer vos liens de navigation sur mobile. (Vous ajouterez les nouveaux styles CSS à global.css ultérieurement.)

    src/components/Hamburger.astro
    ---
    ---
    <div class="hamburger">
      <span class="line"></span>
      <span class="line"></span>
      <span class="line"></span>
    </div>

  3. Placez ce nouveau composant <Hamburger /> juste avant votre composant <Navigation /> dans Header.astro.

Montrez-moi le code !
src/components/Header.astro
---
import Hamburger from './Hamburger.astro';
import Navigation from './Navigation.astro';
---
<header>
  <nav>
    <Hamburger />
    <Navigation />
  </nav>
</header>
  1. Ajoutez les styles suivants pour votre composant Hamburger :
src/styles/global.css
/* Styles de la navigation */
.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;
  }
}

Rédigez votre première balise de script

Titre de la section Rédigez votre première balise de script

Votre en-tête n’est pas encore interactif car il ne peut pas réagir aux interactions de l’utilisateur, comme cliquer sur le menu hamburger pour afficher ou masquer les liens de navigation.

L’ajout d’une balise <script> fournit du JavaScript côté client pour “écouter” un événement utilisateur, puis réagir en conséquence.

  1. Ajoutez la balise <script> suivante à index.astro, juste avant la balise de fermeture </body>.

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

  2. Vérifiez à nouveau votre aperçu de navigateur à différentes tailles, et vérifiez que vous avez un menu de navigation fonctionnel qui est à la fois réactif à la taille de l’écran et réagit aux interactions de l’utilisateur sur cette page.

Importation d’un fichier .js

Titre de la section Importation d’un fichier .js

Au lieu d’écrire votre JavaScript directement sur chaque page, vous pouvez déplacer le contenu de votre balise <script> dans son propre fichier .js dans votre projet.

  1. Créez src/scripts/menu.js (vous devrez créer un nouveau dossier /scripts/) et déplacez-y votre JavaScript.

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

  2. Remplacez le contenu de la balise <script> sur index.astro par l’importation de fichier suivante :

    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. Vérifiez à nouveau votre aperçu de navigateur à une taille plus petite et vérifiez que le menu hamburger ouvre toujours et ferme vos liens de navigation.

  4. Ajoutez la même balise <script> avec l’importation sur vos deux autres pages, about.astro et blog.astro, et vérifiez que vous avez un en-tête réactif et interactif sur chaque page.

    src/pages/about.astro & src/pages/blog.astro
      <Footer />
      <script>
        import "../scripts/menu.js";
      </script>
    </body>

Testez vos connaissances

Titre de la section Testez vos connaissances

  1. Quand Astro exécute-t-il tout JavaScript écrit dans la frontmatter d’un composant ?

  2. En option, Astro peut envoyer du JavaScript au navigateur pour permettre :

  3. Le JavaScript côté client sera envoyé au navigateur d’un utilisateur quand il est écrit ou importé :

Liste de contrôle

Titre de la section Liste de contrôle

Ressources

Titre de la section Ressources

Scripts côté client dans Astro