Discussion on: Bulma Based UI Components for Vue.js

View post

Thanks Ali for this great post. I followed your approach with the Navbar hamburger for toggling menu on mobile screen. The challenge I'm facing now is that the dropdown menu keeps showing after clicking on one of the links on the navbar menu. I'm using this inside a Nuxtjs project.

See below what the code looks like

<template>
  <nav class="navbar has-shadow is-fixed-top" role="navigation" aria-label="main navigation">
    <div class="container">
      <div class="navbar-brand">
        <nuxt-link to="/" class="navbar-item">
          <img class="logo" src="/img/logo.png">
        </nuxt-link>

        <a
          role="button"
          class="navbar-burger burger"
          aria-label="menu"
          aria-expanded="false"
          @click="showMenu = !showMenu"
          :class="{ 'is-active' : showMenu }"
          data-target="customNVMenu"
        >
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>

      <div id="customNVMenu" class="navbar-menu" :class="{ 'is-active' : showMenu }">
        <div class="navbar-end">
          <nuxt-link to="/" class="navbar-item">Home</nuxt-link>
          <nuxt-link to="/about" class="navbar-item">About</nuxt-link>         
          <nuxt-link to="/login" class="navbar-item">Log In</nuxt-link>
          <div class="navbar-item">
            <div class="buttons">
              <nuxt-link to="/register" class="button is-primary">Register</nuxt-link>
            </div>
          </div>
        </div>
      </div>
    </div>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      showMenu: false
    };
  }
};
</script>

How can i toggle the showMenu property to false when any of the navbar menu item is clicked?

Thank you