TopMenu.vue

<template>
<div>
  <b-navbar toggleable="lg" type="dark" variant="info">
    <b-navbar-brand href="#" class="d-none d-md-block" v-on:click="showMainPage">Group Membership Service</b-navbar-brand>

    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

    <b-collapse id="nav-collapse" is-nav>

      <!-- Right aligned nav items -->
      <b-navbar-nav class="ml-auto">
        <b-nav-item href="help/index.html" target="_blank" class="mr-4">Help</b-nav-item>
        <b-nav-form>
          <b-form-input size="sm" class="mr-sm-2" placeholder="Search" v-model.trim="input.genericSearch.filter" @keydown.native.enter.prevent="genericSearch"></b-form-input>
          <b-button size="sm" type="button" v-on:click="genericSearch()">Search</b-button>
        </b-nav-form>
        <b-nav-item-dropdown :text="user" right v-if="user">
          <b-dropdown-item href="logout">Logout</b-dropdown-item>
        </b-nav-item-dropdown>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'TopMenu',
  props: {
    user: String
  },
  computed: mapState({
    input: state => state.input,
  }),
  methods: {
    showMainPage() {
      if (this.$store.state.input.selectedGroupId !== 'ROOT') {
        this.$store.dispatch('changeBreadcrumb', 'ROOT');
      } else {
        this.$store.dispatch('changeTab', 0);
      }
      this.$router.push('/', () => {});
    },
    genericSearch() {
      this.$router.push({ path: '/search', query: { q: this.input.genericSearch.filter } }, () => {});
      this.$store.commit('setGenericSearchFilter', this.input.genericSearch.filter);
    }
  }
}
</script>

<style>
.navbar-dark .nav-link {
  color: rgba(255, 255, 255, .7);
  font-weight: bold;
}
</style>