DEV {JS}

Mode sombre

Étape 2 – Ajouter les liens de navigation ​

🎯 Objectifs ​

Dans cette étape, vous allez ajouter des liens de navigation dans la barre de navigation de l’application Pokédex vers les pages que vous avez créés précédemment.

Vos objectifs sont de :

  • comprendre comment est construite la barre de navigation avec Vuetify.
  • modifier le tableau menuItems pour ajouter les liens vers les pages créées à l’étape précédente.
  • ajouter une icône à chaque lien (Material Design Icons),

ℹ️ Contexte ​

🧭 Où se trouve le menu ? ​

Le menu de navigation se trouve dans le composant src/components/AppHeader.vue.

🧱 Composants Vuetify utilisés dans AppHeader.vue ​

ComposantRôle principal
<v-app-bar>Barre de navigation principale, affichée en haut de l’écran
<v-avatar>Affiche une Poké Ball cliquable pour revenir à la page d’accueil
<v-toolbar-title>Affiche le titre "Pokédex"
<v-spacer>Pousse les éléments vers la droite
<v-btn>Bouton de navigation (généré pour chaque élément du menu)
<v-icon>Icône Material Design associée à chaque bouton

Tableau menuItems ​

Dans la partie <script setup>, vous verrez une constante nommée menuItems.
C’est un tableau qui contient les liens de navigation affichés dans l’en-tête ( <v-app-bar>).

Chaque élément de ce tableau représente un bouton cliquable avec :

  • un title (le texte visible),
  • un path (l’adresse de la page),
  • une icon (l’icône associée).

📋️ Tâches ​

  1. Dans AppHeader.vue, localisez le tableau menuItems.

  2. Complétez ce tableau pour ajouter les liens vers les autres pages :

    • Favoris
    • FAQ
    • Monde Pokémon

  3. Choisissez une icône pour chaque lien sur le site :
    👉 https://pictogrammers.com/library/mdi

  4. Testez l’affichage des liens dans le menu en lançant npm run dev.

✅ Tests ​

Chaque bouton du menu doit rediriger vers l'une des pages créées à l’étape précédente :

  • / → Accueil
  • /favoris → Favoris
  • /faq → Foire Aux Questions
  • /kantomap → Monde Pokémon

🔗 Références utiles ​

📦 Solutions ​

🗂️ src/components/AppHeader.vue ​

vue
<template>
  <!--
  Barre d'application plate
    * flat supprime l'ombre sous la barre
  -->
  <v-app-bar flat>
    <!--
    Conteneur de la barre d'application
      * class="d-flex align-start align-center" aligne les éléments de manière flexible, alignés en haut et centrés verticalement
    -->
    <v-container class="d-flex align-start align-center">
      <!--
      Logo de l'application cliquable
        * class="mr-4 pa-0 cursor-pointer" ajoute une marge à droite, retire le padding, et change le curseur pour indiquer la cliquabilité
        * image définit le chemin vers le logo (Pokeball) de l'application
        * size="64" définit la taille de l'avatar
        * @click redirige vers la page d'accueil
      -->
      <v-avatar
        class="mr-4 pa-0 cursor-pointer"
        image="@/assets/pokeball.svg"
        size="64"
        @click="$router.push('/')"
      />

      <!-- Titre de l'application affiché dans la barre -->
      <v-toolbar-title>Pokedex ({{ pokemonStore.totalPokemons }})</v-toolbar-title>

      <!--
      Liens de navigation générés dynamiquement
        * v-for parcourt chaque élément dans menuItems pour créer un lien de navigation
        * :key utilise link.title pour définir une clé unique par lien
        * :icon affiche l'icône spécifiée pour chaque lien
        * :to utilise le chemin vers la route spécifiée pour chaque lien
      -->
      <v-btn
        v-for="link in menuItems"
        :key="link.title"
        :icon="link.icon"
        :to="link.path"
      />
    </v-container>
  </v-app-bar>
</template>

<script setup>
// Importer le magasin des pokémons
// @/ => représente le dossier src
  import { usePokemonStore } from '@/stores/pokemonStore'

  // Récupère le magasin des Pokémon
  const pokemonStore = usePokemonStore()

  /*
  Définition des éléments de menu pour la navigation
    - Chaque élément contient :
      * title : le titre du lien
      * path : le chemin de la route
      * icon : l'icône du lien
  */
  const menuItems = [
    { title: 'Accueil', path: '/', icon: 'mdi-pokeball' },
    { title: 'Favoris', path: '/favoris', icon: 'mdi-heart' },
    { title: 'FAQ', path: '/faq', icon: 'mdi-frequently-asked-questions' },
    { title: 'Kanto', path: '/kantomap', icon: 'mdi-map' },
    // Ajouter ici les autres liens du menu.
    // Vous trouverez des icônes sur https://pictogrammers.com/library/mdi/
    // N'oubliez pas d'ajouter le préfixe 'mdi-' devant le nom de l'icône.
  ]

</script>