C'est tellement compliqué.

:^)

client/src/components/global/navbar/navbar.vue

@@ -1,43 +1,56 @@
 <template>
-    <nav class="navbar navbar-dark">
+    <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
+      <a class="navbar-brand font-display font-weight-700" href="#">Auracle</a>
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <ul class="navbar-nav mr-auto" v-if="links.length != 0">
+          <li class="nav-item" v-for="(link, index) in links" :key="index">
+            <router-link v-bind:to="link.url" class="nav-link">{{ link.text }}</router-link>
+          </li>
+        </ul>
+      </div>
+    </nav>
+    <!--<nav class="navbar navbar-dark">
         <ul v-if="links.length != 0">
             <li v-for="(link, index) in links" :key="index">
                 <router-link v-bind:to="link.url">{{ link.text }}</router-link>
             </li>
         </ul>
-    </nav>
+    </nav>-->
 </template>
 
 <script>
 
-export default {
-    name: 'navbar',
-    data() {
-        return {
-            links: [
-                {
-                    id: 0,
-                    text: 'Accueil',
-                    url: '/',
-                },
-                {
-                    id: 1,
-                    text: 'Sortilèges',
-                    url: '/spells',
-                },
-                {
-                    id: 2,
-                    text: 'Monde',
-                    url: '/world',
-                },
-            ]
+    export default {
+        name: 'navbar',
+        data() {
+            return {
+                links: [
+                    {
+                        id: 0,
+                        text: 'Accueil',
+                        url: '/',
+                    },
+                    {
+                        id: 1,
+                        text: 'Sortilèges',
+                        url: '/spells',
+                    },
+                    {
+                        id: 2,
+                        text: 'Monde',
+                        url: '/world',
+                    },
+                ]
+            }
         }
     }
-}
 </script>
 
 <style lang="scss">
-
+    /*
     nav {
         width: 100%;
         position: fixed;
@@ -109,4 +122,5 @@ export default {
             }
         }
     }
+    */
 </style>

client/src/components/spells/spell-card.vue

@@ -86,7 +86,7 @@ export default {
 </script>
 
 <style lang="scss">
-
+    /*
     .spell-card {
         max-width: 35rem;
         padding: .5rem;
@@ -204,5 +204,5 @@ export default {
         }
 
     }
-
+    */
 </style>

client/src/main.js

@@ -10,6 +10,8 @@ Vue.use(VueRouter)
 const router = new VueRouter({
     mode: 'history',
     routes,
+    linkActiveClass: "",
+    linkExactActiveClass: "active",
 });
 
 const app = new Vue({