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

src/assets/scss/app.scss

@@ -4,5 +4,7 @@
 
 @import 'base/root';
 
+@import 'classes/nav-list';
+
 @import 'fonts/noto-sans';
 @import 'fonts/redaction';

src/assets/scss/classes/_nav-list.scss

@@ -0,0 +1,27 @@
+.nav-list {
+  font-family: $font-family-base;
+
+  ul {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 45px;
+    padding: 0;
+    margin: 0;
+  }
+
+  li {
+    list-style: none;
+    line-height: 0;
+
+    &:not(:last-child) {
+      margin-right: 20px;
+    }
+  }
+
+  &.dot-btns {
+    li:not(:last-child) {
+      margin-right: 20px;
+    }
+  }
+}