From 267830b15d15ba1244dd6472d50239ed2efdbd32 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Fri, 20 Jan 2023 00:48:52 +0100
Subject: [PATCH] refactor: migrate Navigation component

---
 .../{Navigation.vue => SiteNavigation.vue}    | 69 ++++++++-----------
 1 file changed, 30 insertions(+), 39 deletions(-)
 rename src/components/{Navigation.vue => SiteNavigation.vue} (57%)

diff --git a/src/components/Navigation.vue b/src/components/SiteNavigation.vue
similarity index 57%
rename from src/components/Navigation.vue
rename to src/components/SiteNavigation.vue
index cef6d7e..12aedd0 100644
--- a/src/components/Navigation.vue
+++ b/src/components/SiteNavigation.vue
@@ -1,52 +1,47 @@
+<script setup lang="ts">
+import { RouterLink } from "vue-router";
+import router from "@/router";
+</script>
+
 <template>
   <nav class="nav">
-    <ul class="nav__list flex flex--row flex--nowrap flex--center-v">
-      <li class="nav__item" v-for="(route, idx) in routes" :key="idx">
-        <router-link class="nav__link" :to="route.path">
+    <ul class="nav__list">
+      <li
+        class="nav__item"
+        v-for="(route, idx) in router.options.routes"
+        :key="idx"
+      >
+        <RouterLink class="nav__link" :to="route.path">
           {{ route.name }}
-        </router-link>
+        </RouterLink>
         <div class="nav__underline"></div>
       </li>
     </ul>
   </nav>
 </template>
 
-<script>
-export default {
-  props: {
-    routes: {
-      required: true,
-      type: Array,
-    },
-  },
-};
-</script>
-
 <style lang="scss">
-@import "@/scss/_variables.scss";
-@import "@/scss/_mixins.scss";
-
 .nav {
   overflow: auto;
 
   &__list {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: var(--navigation-justify-content);
+    align-items: center;
+
+    width: 100%;
+
     margin: 0;
     padding: 0;
 
     list-style-type: none;
 
-    z-index: 1;
-
     overflow: auto;
-    width: 100%;
-
-    @include mq-desktop {
-      justify-content: center;
-    }
   }
 
   &__item {
-    padding: 0.375em;
+    padding: 0.375rem;
     white-space: nowrap;
   }
 
@@ -54,28 +49,22 @@ export default {
     display: block;
     font-weight: bold;
     line-height: 1;
-    color: $copy-color;
+    color: var(--color-text);
     margin-bottom: 0.375em;
     text-decoration: none;
+    text-transform: capitalize;
 
     &.router-link-exact-active {
-      color: #fff;
-    }
-  }
-
-  &__link:hover ~ &__underline {
-    &:before,
-    &:after {
-      width: 50%;
-      background-color: $copy-color;
+      color: var(--color-text);
     }
   }
 
+  &__link:hover ~ &__underline,
   &__link.router-link-exact-active ~ &__underline {
     &:before,
     &:after {
       width: 50%;
-      background-color: #fff;
+      background-color: var(--color-text);
     }
   }
 
@@ -88,9 +77,11 @@ export default {
     &:after {
       content: "";
       position: absolute;
-      width: 0;
-      height: 0.125em;
       bottom: 0;
+
+      width: 0;
+      height: 0.125rem;
+
       transition: all 0.2s ease-in-out;
     }