add nav-list class for series of buttons and update App

src/App.vue

@@ -17,14 +17,15 @@
           {{ $t('title') }}
         </b-navbar-brand>
 
-        <b-nav class="ml-auto" pills>
-          <b-nav-item
-            v-for="name in mainRoutes" :key="name"
-            :to="{ name }" :active="$route.name === name"
-          >
-            {{ $t('sections.' + name) }}
-          </b-nav-item>
-        </b-nav>
+        <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" />
@@ -51,7 +52,11 @@ export default {
 
   data () {
     return {
-      mainRoutes: ['library', 'kit', 'gallery'],
+      mainRoutes: [
+        { to: 'library', variant: 'dark' },
+        { to: 'kit', variant: 'kit' },
+        { to: 'gallery', variant: 'creation' }
+      ],
       subRoutes: ['home', 'introduction', 'blog', 'contact']
     }
   }
@@ -61,3 +66,17 @@ export default {
 <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>