Navbar is-active colorchange

public/lib/buefy-0.7.5.css

@@ -4549,8 +4549,9 @@ a.list-item {
     .navbar.is-primary .navbar-brand > a.navbar-item:hover, .navbar.is-primary .navbar-brand > a.navbar-item.is-active,
     .navbar.is-primary .navbar-brand .navbar-link:hover,
     .navbar.is-primary .navbar-brand .navbar-link.is-active {
-      background-color: #0046a0;
-      color: white; }
+      background-color: #01295d;
+        color: white;
+        border-bottom: 3px solid white; }
     .navbar.is-primary .navbar-brand .navbar-link::after {
       border-color: white; }
     .navbar.is-primary .navbar-burger {
@@ -4568,18 +4569,18 @@ a.list-item {
       .navbar.is-primary .navbar-end > a.navbar-item.is-active,
       .navbar.is-primary .navbar-end .navbar-link:hover,
       .navbar.is-primary .navbar-end .navbar-link.is-active {
-        background-color: #0046a0;
-        color: white; }
+        background-color: #e8e8e8;
+        color: #0046a0; }
       .navbar.is-primary .navbar-start .navbar-link::after,
       .navbar.is-primary .navbar-end .navbar-link::after {
         border-color: white; }
       .navbar.is-primary .navbar-item.has-dropdown:hover .navbar-link,
       .navbar.is-primary .navbar-item.has-dropdown.is-active .navbar-link {
-        background-color: #0046a0;
-        color: white; }
+        background-color: #e8e8e8;
+        color: #0046a0; }
       .navbar.is-primary .navbar-dropdown a.navbar-item.is-active {
-        background-color: #0046a0;
-        color: white; } }
+        background-color: #e8e8e8;
+        color: #0046a0; } }
   .navbar.is-link {
     background-color: #0046a0;
     color: white; }
@@ -4589,8 +4590,8 @@ a.list-item {
     .navbar.is-link .navbar-brand > a.navbar-item:hover, .navbar.is-link .navbar-brand > a.navbar-item.is-active,
     .navbar.is-link .navbar-brand .navbar-link:hover,
     .navbar.is-link .navbar-brand .navbar-link.is-active {
-      background-color: #0046a0;
-      color: white; }
+      background-color: #e8e8e8;
+      color: #0046a0; }
     .navbar.is-link .navbar-brand .navbar-link::after {
       border-color: white; }
     .navbar.is-link .navbar-burger {
@@ -4608,18 +4609,18 @@ a.list-item {
       .navbar.is-link .navbar-end > a.navbar-item.is-active,
       .navbar.is-link .navbar-end .navbar-link:hover,
       .navbar.is-link .navbar-end .navbar-link.is-active {
-        background-color: #0046a0;
-        color: white; }
+        background-color: #e8e8e8;
+        color: #0046a0; }
       .navbar.is-link .navbar-start .navbar-link::after,
       .navbar.is-link .navbar-end .navbar-link::after {
         border-color: white; }
       .navbar.is-link .navbar-item.has-dropdown:hover .navbar-link,
       .navbar.is-link .navbar-item.has-dropdown.is-active .navbar-link {
-        background-color: #0046a0;
-        color: white; }
+        background-color: #e8e8e8;
+        color: #0046a0; }
       .navbar.is-link .navbar-dropdown a.navbar-item.is-active {
-        background-color: #0046a0;
-        color: white; } }
+        background-color: #e8e8e8;
+        color: #0046a0; } }
   .navbar.is-info {
     background-color: #167df0;
     color: #fff; }

public/routes/navRoutes.js

@@ -2,24 +2,24 @@ Vue.component('nav-router', {
     template: `
                 <div>
                     <nav class="navbar is-fixed-bottom is-expanded is-primary" role="navigation" aria-label="main navigation">
-                        <div class="navbar-brand is-expanded is-primary">
-				            <router-link to="/home" class="navbar-item is-expanded has-text-centered">
+                        <div class="navbar-brand is-expanded is-light">
+				            <router-link to="/home" class="navbar-item is-primary is-expanded has-text-centered">
                                 <i class="material-icons">home</i>
 				            </router-link>
 
-                            <router-link to="/files" class="navbar-item is-expanded">
+                            <router-link to="/files" class="navbar-item is-primary is-expanded">
                                 <i class="material-icons">language</i>
                             </router-link>
 
-                            <router-link to="/createMessage" class="navbar-item is-expanded">
+                            <router-link to="/createMessage" class="navbar-item is-primary is-expanded">
                                 <i class="material-icons">add_circle</i>
                             </router-link>
 
-                            <router-link to="/bookmark" class="navbar-item is-expanded">
+                            <router-link to="/bookmark" class="navbar-item is-primary is-expanded">
                                 <i class="material-icons">bookmark</i>
                             </router-link>
 
-                            <router-link to="/profil" class="navbar-item is-expanded">
+                            <router-link to="/profil" class="navbar-item is-primary is-expanded">
                                 <i class="material-icons">person</i>
                             </router-link>
                         </div>
@@ -39,4 +39,5 @@ const routes = [
 
 const router = new VueRouter({
     routes,
+    linkActiveClass: 'is-active'
 });