[Vuejs]-How to change bars icon in the navbar into cross (xmark) in responsive view using Font Awesome in Vue?

by

0👍

✅

One solution it’s you create a data and method to do this and use on the template, like this:

data:

data: () => ({
    menuOpen: false,
  }),

methods:

methods: {
  toggleMenu() {
    this.menuOpen = !this.menuOpen;
  },

template:

<button
  class="navbar-toggler d-flex d-lg-none flex-column justify-content-around"
  type="button"
  data-bs-toggle="collapse"
  data-bs-target="#navbarSupportedContent"
  aria-controls="navbarSupportedContent"
  aria-expanded="false"
  aria-label="Toggle navigation"
  @click="toggleMenu"
>
  <i v-if="!menuOpen">
    <fa :icon="['fas', 'bars']" class="icon toggle alt fa-3x burger-bars" />
  </i>
  <i v-else>
    <fa :icon="['fas', 'times']" class="icon toggle alt fa-3x burger-times" />
  </i>
</button>

Leave a comment