From 2bb3abab529f95cdc384e6f01b3b220d109e810d Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Fri, 28 Jan 2022 23:59:47 +0100
Subject: [PATCH] refactor: better use of scss features

---
 src/components/Navigation.vue | 113 +++++++++++++++++-----------------
 1 file changed, 57 insertions(+), 56 deletions(-)

diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index 54f5a04..cef6d7e 100644
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -28,78 +28,79 @@ export default {
 
 .nav {
   overflow: auto;
-}
 
-.nav__list {
-  margin: 0;
-  padding: 0;
+  &__list {
+    margin: 0;
+    padding: 0;
 
-  list-style-type: none;
+    list-style-type: none;
 
-  z-index: 1;
+    z-index: 1;
 
-  overflow: auto;
-  width: 100%;
+    overflow: auto;
+    width: 100%;
 
-  @include mq-desktop {
-    justify-content: center;
+    @include mq-desktop {
+      justify-content: center;
+    }
   }
-}
 
-.nav__item {
-  padding: 0.375em;
-  white-space: nowrap;
-}
+  &__item {
+    padding: 0.375em;
+    white-space: nowrap;
+  }
 
-.nav__link {
-  display: block;
-  font-weight: bold;
-  line-height: 1;
-  color: $copy-color;
-  margin-bottom: 0.375em;
-  text-decoration: none;
+  &__link {
+    display: block;
+    font-weight: bold;
+    line-height: 1;
+    color: $copy-color;
+    margin-bottom: 0.375em;
+    text-decoration: none;
 
-  &:hover ~ .nav__underline {
-    &::before,
-    &::after {
+    &.router-link-exact-active {
+      color: #fff;
+    }
+  }
+
+  &__link:hover ~ &__underline {
+    &:before,
+    &:after {
       width: 50%;
       background-color: $copy-color;
     }
   }
 
-  &.router-link-exact-active {
-    color: $bg-color-light;
+  &__link.router-link-exact-active ~ &__underline {
+    &:before,
+    &:after {
+      width: 50%;
+      background-color: #fff;
+    }
+  }
 
-    &:hover ~ .nav__underline {
-      &::before,
-      &::after {
-        background-color: $bg-color-light;
-      }
+  &__underline {
+    position: relative;
+    display: block;
+    width: 100%;
+
+    &:before,
+    &:after {
+      content: "";
+      position: absolute;
+      width: 0;
+      height: 0.125em;
+      bottom: 0;
+      transition: all 0.2s ease-in-out;
+    }
+
+    &:before {
+      left: 50%;
+    }
+
+    &:after {
+      right: 50%;
     }
   }
 }
-
-.nav__underline {
-  position: relative;
-  display: block;
-  width: 100%;
-
-  &::before,
-  &::after {
-    content: "";
-    position: absolute;
-    width: 0;
-    height: 0.125em;
-    bottom: 0;
-    transition: all 0.2s ease-in-out;
-  }
-
-  &::before {
-    left: 50%;
-  }
-
-  &::after {
-    right: 50%;
-  }
-}
 </style>