Partage
  • Partager sur Facebook
  • Partager sur Twitter

Cliquer button pour changer couleur navbar Vue.js

DavidBouhaben
20 octobre 2021 à 18:50:10

Bonjour.
Cela fait 3 heures que je galère à trouver un moyen pour changer la couleur de navbar en rouge après avoir cliquer le hamburger.
Comment puis je faire ? Car mes codes ne fonctionnent tout simplement pas.
Voici mes codes html à l'interieur de template. On peut voir que j'ai déclaré
@click.prevent="hamburgerClick" sur la ligne 39
<template>
  <!-- navbar-black -->
  <!-- Change color on scroll dosen't work -->
  <!-- Hamburger dosen't work, i tried -->
  <!-- :class="{ `bg-white`: scrollPosition > 0 }" -->
  <!-- @scroll="handleScroll" -->

  <header
    id="navbar"
    class="h-16 fixed w-full z-50 top-0"
    :class="{
      'bg-white': !view.beforeScroll,
      'bg-red-500': !view.hamburgerClick,
    }"
  >
    <div class="container-raw flex justify-between h-full">
      <!-- Pour le logo -->
      <!-- Il faut changer a à nuxt-link router -->
      <NuxtLink
        to="/"
        class="z-10 my-auto flex h-6 header-logo nuxt_link_active"
      >
        <img
          class="h-full my-auto"
          :src="
            view.beforeScroll
              ? require(`~/assets/images/logo/logo-white.svg`)
              : require(`~/assets/images/logo/logo-color.svg`)
          "
          alt="Logo"
        />
        <!-- view.hamburgerClick ? require(`~/assets/images/logo/logo-white.svg`) : require(`~/assets/images/logo/logo-color.svg`), -->
      </NuxtLink>
      <!-- Pour le humburger -->
      <div class="my-auto md:hidden">
        <!-- Hamburger à faire, hamburger--spring is--active -->
        <button
          class="hamburger hamburger--spring"
          type="button"
          @click.prevent="hamburgerClick"
        >
          <span class="hamburger-box">
            <span class="hamburger-inner"></span>
          </span>
        </button>
      </div>
      <!-- Pour le menu nav animation -->
      <nav
        class="
          absolute
          top-0
          left-0
          right-0
          bottom-0
          invisible
          md:visible
          mt-2.5
        "
      >
        <ul
          class="navbar-menu text-white text-xs md:flex md:justify-end"
          :class="{ 'text-gray-900': !view.beforeScroll }"
        >
          <!-- container dropdown 5X -->
          <li class="container-dropdown mx-3">
            <a href="/voitures occasion">
              <img
                class="h-5 md:3 inline mr-2 my-auto"
                src="~/assets/images/menu/car.svg"
                alt="Voitures"
              />
              Nos voitures
            </a>
          </li>
          <!-- Pour ma liste -->

          <li class="container-dropdown mx-3">
            <div>
              <NuxtLink to="/garanties-shoppingauto">
                <!-- Symbol coeur -->
                <img
                  class="h-5 md:3 inline mr-2 my-auto"
                  src="~/assets/images/menu/Garanties.svg"
                  alt="Garanties"
                />
                Nos garanties
              </NuxtLink>
            </div>
          </li>

          <li class="container-dropdown mx-3">
            <div>
              <a href="/qui-sommes-nous">
                <!-- Symbol coeur -->
                <img
                  class="h-5 md:3 inline mr-2 my-auto"
                  src="~/assets/images/menu/list.svg"
                  alt="Qui sommes-nous ?"
                />
                Qui sommes-nous ?
              </a>
            </div>
          </li>

          <li class="container-dropdown mx-3">
            <div>
              <NuxtLink
                to="/garanties-shoppingauto"
                class="nuxt-link-exact-active nuxt-link-active"
              >
                <!-- Symbol coeur -->
                <img
                  class="h-5 md:3 inline mr-2 my-auto"
                  src="~/assets/images/menu/chat.svg"
                  alt="FAQ"
                />
                FAQ
              </NuxtLink>
            </div>
          </li>

          <li class="container-dropdown mx-3">
            <div>
              <a href="/garanties-shoppingauto">
                <img
                  class="h-5 md:3 inline mr-2 my-auto"
                  src="~/assets/images/menu/person.svg"
                  alt="Garanties"
                />
                Me connecter
              </a>
            </div>
          </li>

          <!-- Ma liste -->
          <li class="container-dropdown mx-3">
            <div
              class="
                border border-primary
                py-1
                px-2
                rounded-full
                border-green-300
              "
            >
              <NuxtLink to="/mon-compte/wishlist" class="heart-color">
                <!-- Symbol coeur -->
                <svg
                  aria-hidden="true"
                  focusable="false"
                  data-prefix="far"
                  data-icon="heart"
                  role="img"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 512 512"
                  class="
                    text-sm
                    my-auto
                    md:mt-1
                    text-primary
                    svg-inline--fa
                    fa-heart fa-w-16
                  "
                >
                  <path
                    fill="currentColor"
                    d="M458.4 64.3C400.6 15.7 311.3 23 256 79.3 200.7 23 111.4 15.6 53.6 64.3-21.6 127.6-10.6 230.8 43 285.5l175.4 178.7c10 10.2 23.4 15.9 37.6 15.9 14.3 0 27.6-5.6 37.6-15.8L469 285.6c53.5-54.7 64.7-157.9-10.6-221.3zm-23.6 187.5L259.4 430.5c-2.4 2.4-4.4 2.4-6.8 0L77.2 251.8c-36.5-37.2-43.9-107.6 7.3-150.7 38.9-32.7 98.9-27.8 136.5 10.5l35 35.7 35-35.7c37.8-38.5 97.8-43.2 136.5-10.6 51.1 43.1 43.5 113.9 7.3 150.8z"
                    class=""
                  ></path>
                </svg>
                <span
                  class="my-auto text-xs mr-1 text-white"
                  :class="{ 'text-gray-900': !view.beforeScroll }"
                >
                  (0)
                </span>
                <span
                  class="text-white"
                  :class="{ 'text-gray-900': !view.beforeScroll }"
                >
                  Ma liste
                </span>
              </NuxtLink>
            </div>
          </li>
        </ul>
      </nav>
    </div>
  </header>
</template>
Ici, on peut voir mon script, on peut voir que j'ai déclaré hamburgerClick: true dans le data pour ensuite declarer une méthode nommé hamburgerClick pour pouvoir changer le hamburger en X après l'avoir cliqué. Le problème c'est que j'aimerias que la couleur de NAV deviennent rouge après avoir cliquer le hamburger mais cela ne fonctionne tout simplement pas ? Je ne comprends pas pourquoi, on peut voir que j'ai fait :class="{'bg-red': !view.hamburgerClick}". j'ai pensé qu'il faut faire comme ca mais ca ne fonctionne pas.
Quelqu'un peut m'aider s'il vous plait
<script>
export default {
  name: 'Nav',
  data() {
    return {
      view: {
        beforeScroll: 1, // true
        hamburgerClick: true,
        // navOpen: 1, // true
      },
    }
  },

  mounted() {
    window.addEventListener('scroll', this.handleScroll)
    window.addEventListener('click', this.hamburgerClick)
    // window.addEventListener('change', this.navOpen)
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll)
    window.removeEventListener('click', this.hamburgerClick)
    // window.removeEventListener('change', this.navOpen)
  },
  methods: {
    handleScroll() {
      if (window.pageYOffset > 0) {
        this.view.beforeScroll = 0 // false
      } else {
        this.view.beforeScroll = 1 // true
      }
    },
    hamburgerClick(e) {
      e.currentTarget.classList.toggle('is-active')
    },
    // navOpen() {
    //   if (this.navOpen) {
    //     this.hamburgerClick = 1
    //   } else {
    //     this.hamburgerClick = 0
    //   }
    // },
  },
}
</script>

Voici mon github: https://github.com/Darkheadbanger/my-faq-alternance

-
Edité par DavidBouhaben 20 octobre 2021 à 18:50:32

  • Partager sur Facebook
  • Partager sur Twitter
piero5673
22 octobre 2021 à 0:04:19

Bonjour,

Est-ce que tu es sur que c'est lors de l'évènement change qu'il faut réagir ? change c'est pour les input. Pareil pour le click, est-ce que c'est vraiment le click sur window que tu veux écouter ?

https://developer.mozilla.org/fr/docs/Web/API/HTMLElement/change_event 

Quitte à utiliser des booléens, autant utiliser des true / false plutôt que des 1 / 0 (en plus ça colore le code et pas besoin de commentaire à côté ni de méthodes dans le composant).

Dans navOpen, ce n'est pas plutôt this.view.hamburgerClick que tu veux modifier ? C'est normal que ça ne change rien si this.view.hamburgerClick ne change jamais. 

  • Partager sur Facebook
  • Partager sur Twitter
DavidBouhaben
23 octobre 2021 à 14:10:12

piero5673 a écrit:

Bonjour,

Est-ce que tu es sur que c'est lors de l'évènement change qu'il faut réagir ? change c'est pour les input. Pareil pour le click, est-ce que c'est vraiment le click sur window que tu veux écouter ?

https://developer.mozilla.org/fr/docs/Web/API/HTMLElement/change_event 

Quitte à utiliser des booléens, autant utiliser des true / false plutôt que des 1 / 0 (en plus ça colore le code et pas besoin de commentaire à côté ni de méthodes dans le composant).

Dans navOpen, ce n'est pas plutôt this.view.hamburgerClick que tu veux modifier ? C'est normal que ça ne change rien si this.view.hamburgerClick ne change jamais. 

Merci pour ta réponse. j'ai réussi à le faire tout seul

  • Partager sur Facebook
  • Partager sur Twitter