comptes/src/components/navbar.vue

<template>
  <b-navbar toggleable="md" variant="light">
    <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>

    <b-navbar-brand :to="{ name: 'home'}">
      <font-awesome-icon icon="file-invoice-dollar" /> Comptes
    </b-navbar-brand>

    <b-collapse is-nav id="nav_collapse">
      <b-navbar-nav class="ml-auto">
        <b-nav-item :to="{ name: 'config' }">Config</b-nav-item>
      </b-navbar-nav>
    </b-collapse>

  </b-navbar>
</template>

<script>
export default {
  name: 'navbar',
  props: {
  }
}
</script>

<style scoped>
.navbar {
}

.navbar a {
  color: #dc3545;
}

.navbar a.router-link-exact-active {
  font-weight: bold;
  color: #42b983;
}
</style>