enfrancais-app/src/App.vue

<template>
  <div id="app">
    <header>
      <b-navbar>
        <b-dropdown variant="link" no-caret>
          <template #button-content>
            <span class="navbar-toggler-icon" />
            <span class="sr-only">Menu</span>
          </template>

          <b-dropdown-item v-for="name in subRoutes" :key="name" :to="{ name }">
            {{ $t('sections.' + name) }}
          </b-dropdown-item>
        </b-dropdown>

        <b-navbar-brand :to="{ name: 'home' }">
          {{ $t('title') }}
        </b-navbar-brand>

        <nav class="nav-list ml-auto">
          <ul>
            <li v-for="link in mainRoutes" :key="link.to">
              <b-button :to="link.to" :active="$route.name === link.to" :variant="link.variant">
                {{ $t('sections.' + link.to) }}
              </b-button>
            </li>
          </ul>
        </nav>
      </b-navbar>

      <router-view name="options" />
    </header>

    <main id="main">
      <router-view />
    </main>
  </div>
</template>

<script>
export default {
  name: 'App',

  metaInfo () {
    return {
      // if no subcomponents specify a metaInfo.title, try to get one from the route name.
      title: this.$t('sections.' + this.$route.name, ''),
      // all titles will be injected into this template
      titleTemplate: '%s | ' + this.$t('title')
    }
  },

  data () {
    return {
      mainRoutes: [
        { to: 'library', variant: 'dark' },
        { to: 'kit', variant: 'kit' },
        { to: 'gallery', variant: 'creation' }
      ],
      subRoutes: ['home', 'introduction', 'blog', 'contact']
    }
  }
}
</script>

<style lang="scss">
@import '@/assets/scss/app.scss';
</style>

<style lang="scss" scoped>
.navbar-brand {
  font-size: 1.3125rem;
  font-weight: $font-weight-bold;
  text-decoration: none;
}

.nav-list {
  a:not(.active) {
    opacity: .25;
  }
}
</style>