refactor: migrate Navigation component

src/components/SiteNavigation.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { RouterLink } from "vue-router";
+import router from "@/router";
+</script>
+
+<template>
+  <nav class="nav">
+    <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 }}
+        </RouterLink>
+        <div class="nav__underline"></div>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<style lang="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;
+
+    overflow: auto;
+  }
+
+  &__item {
+    padding: 0.375rem;
+    white-space: nowrap;
+  }
+
+  &__link {
+    display: block;
+    font-weight: bold;
+    line-height: 1;
+    color: var(--color-text);
+    margin-bottom: 0.375em;
+    text-decoration: none;
+    text-transform: capitalize;
+
+    &.router-link-exact-active {
+      color: var(--color-text);
+    }
+  }
+
+  &__link:hover ~ &__underline,
+  &__link.router-link-exact-active ~ &__underline {
+    &:before,
+    &:after {
+      width: 50%;
+      background-color: var(--color-text);
+    }
+  }
+
+  &__underline {
+    position: relative;
+    display: block;
+    width: 100%;
+
+    &:before,
+    &:after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+
+      width: 0;
+      height: 0.125rem;
+
+      transition: all 0.2s ease-in-out;
+    }
+
+    &:before {
+      left: 50%;
+    }
+
+    &:after {
+      right: 50%;
+    }
+  }
+}
+</style>