parsley/app/javascript/components/AppNavbar.vue

<template>
  <nav class="navbar is-primary" role="navigation" aria-label="main navigation">
    <div class="container">
      <div class="navbar-brand">
        <a class="navbar-item" href="/">
          PARSLEY
        </a>
        <div class="navbar-burger" :class="{ 'is-active': menuActive}" @click="menuActive = !menuActive">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
      <div class="navbar-menu" :class="{ 'is-active': menuActive}">
        <div class="navbar-start">
          <router-link to="/" class="navbar-item">Recipes</router-link>
          <router-link to="/ingredients" class="navbar-item">Ingredients</router-link>
          <router-link to="/calculator" class="navbar-item">Calculator</router-link>
          <router-link v-if="isLoggedIn" to="/logs" class="navbar-item">Log</router-link>
          <router-link v-if="isLoggedIn" to="/notes" class="navbar-item">Notes</router-link>
          <router-link to="/about" class="navbar-item">About</router-link>
          <a v-if="isAdmin" class="navbar-item" href="/admin/users">Admin</a>

        </div>
        <div class="navbar-end">
          <div class="navbar-item has-dropdown is-hoverable" >
            <div v-if="isLoggedIn">
              <a class="navbar-link" href="#" @click.prevent>
                {{ user.name }}
              </a>
              <div class="navbar-dropdown is-boxed">
                <a class="navbar-item" href="#">
                  Profile
                </a>
                <router-link to="/logout" class="navbar-item">Logout</router-link>
              </div>
            </div>
            <div v-else>
              <user-login></user-login>
            </div>

          </div>
        </div>
      </div>
    </div>
  </nav>
</template>

<script>

  import UserLogin from "./UserLogin";
  import { mapState } from "vuex";

  export default {
    data() {
      return {
        menuActive: false
      };
    },

    computed: {
      ...mapState([
        'route',
        'user'
      ])
    },

    watch: {
      route() {
        this.menuActive = false;
      },

      user() {
        this.menuActive = false;
      }
    },

    components: {
      UserLogin
    }
  }

</script>