refactor: better use of scss features

src/components/Navigation.vue

@@ -28,9 +28,8 @@ export default {
 
 .nav {
   overflow: auto;
-}
 
-.nav__list {
+  &__list {
     margin: 0;
     padding: 0;
 
@@ -44,14 +43,14 @@ export default {
     @include mq-desktop {
       justify-content: center;
     }
-}
+  }
 
-.nav__item {
+  &__item {
     padding: 0.375em;
     white-space: nowrap;
-}
+  }
 
-.nav__link {
+  &__link {
     display: block;
     font-weight: bold;
     line-height: 1;
@@ -59,33 +58,34 @@ export default {
     margin-bottom: 0.375em;
     text-decoration: none;
 
-  &:hover ~ .nav__underline {
+    &.router-link-exact-active {
-    &::before,
+      color: #fff;
-    &::after {
+    }
+  }
+
+  &__link:hover ~ &__underline {
+    &:before,
+    &:after {
       width: 50%;
       background-color: $copy-color;
     }
   }
 
-  &.router-link-exact-active {
+  &__link.router-link-exact-active ~ &__underline {
-    color: $bg-color-light;
+    &:before,
+    &:after {
+      width: 50%;
+      background-color: #fff;
+    }
+  }
 
-    &:hover ~ .nav__underline {
+  &__underline {
-      &::before,
-      &::after {
-        background-color: $bg-color-light;
-      }
-    }
-  }
-}
-
-.nav__underline {
     position: relative;
     display: block;
     width: 100%;
 
-  &::before,
+    &:before,
-  &::after {
+    &:after {
       content: "";
       position: absolute;
       width: 0;
@@ -94,12 +94,13 @@ export default {
       transition: all 0.2s ease-in-out;
     }
 
-  &::before {
+    &:before {
       left: 50%;
     }
 
-  &::after {
+    &:after {
       right: 50%;
     }
+  }
 }
 </style>