AppNavbar.vue

<template>
  <nav
    class="navbar is-transparent"
    v-bind:class="[isFixedTop ? 'is-fixed-top' : '', { 'is-large-navbar': scrollPosition < navHeight }]"
    role="navigation"
    aria-label="main navigation"
  >
    <div class="container">
      <div class="navbar-brand">
        <router-link class="navbar-item" to="/">
          <img src="../assets/logo-light-mathias-brouilly.png">
        </router-link>
        <a
          role="button"
          @click="showNav = !showNav"
          class="navbar-burger burger"
          :class="{ 'is-active': showNav }"
          aria-label="menu"
          aria-expanded="false"
          data-target="navbarMenuHeroA"
        >
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div><!-- .navbar-brand -->
      <div class="navbar-menu" :class="{ 'is-active': showNav }" id="navbarMenuHeroA">
        <div class="navbar-end">
          <a v-on:click="removeNav" class="navbar-item" href="/#services" title="Services">Services</a>
          <a v-on:click="removeNav" class="navbar-item" href="/#projects" title="Projects">Projects</a>
          <router-link v-on:click.prevent="removeNav" class="navbar-item" to="/blog" title="About">Blog</router-link>
          <router-link class="navbar-item" to="/about" title="About">About</router-link>
        </div><!-- navbar-end -->
      </div><!-- navbar-menu -->
    </div>
  </nav>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'AppNavbar',
  data () {
    return {
      showNav: false,
      scrollPosition: window.pageYOffset,
      navHeight: null
    }
  },
  props: {
    isFixedTop: Boolean
  },
  methods: {
    updateScroll () {
      this.scrollPosition = window.scrollY
      this.navHeight = document.querySelector('.navbar').offsetHeight
    },
    removeNav () {
      this.showNav = false
    }
  },
  // beforeLeave () {
  //   window.addEventListener('beforeunload', this.removeNav)
  // },
  mounted () {
    window.addEventListener('scroll', this.updateScroll)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.navbar {
  border-bottom: 1px solid $color-1;
}

.navbar.is-large-navbar {
  img {
    max-height: 2.25rem;
  }
}

@include desktop {
  .navbar.is-large-navbar > .container {
    min-height: 4rem;
  }
}

@include until($desktop) {
  .navbar-brand {
    position: relative;
    z-index: 1;
  }

  .navbar-menu {
    display: block;
    opacity: 0;
    position: absolute;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    transition: all 0.5s ease-in-out;
    pointer-events: none;
    z-index: -1;
  }

  .navbar-menu.is-active {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}
</style>