feat: ♻️ refactor ALL THE THINGS!!! (again)

Update to Vue 3 and employ Vue Router, additional design changes and navigation changes

src/components/Navigation.vue

@@ -0,0 +1,105 @@
+<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">
+          {{ route.name }}
+        </router-link>
+        <div class="nav__underline"></div>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<script>
+export default {
+  props: {
+    routes: {
+      required: true,
+      type: Array,
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import "@/scss/base.scss";
+
+.nav {
+  overflow: auto;
+}
+
+.nav__list {
+  margin: 0;
+  padding: 0;
+
+  list-style-type: none;
+
+  z-index: 1;
+
+  overflow: auto;
+  width: 100%;
+
+  @include mq-desktop {
+    justify-content: center;
+  }
+}
+
+.nav__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;
+
+  &:hover ~ .nav__underline {
+    &::before,
+    &::after {
+      width: 50%;
+      background-color: $copy-color;
+    }
+  }
+
+  &.router-link-exact-active {
+    color: $bg-color-light;
+
+    &:hover ~ .nav__underline {
+      &::before,
+      &::after {
+        background-color: $bg-color-light;
+      }
+    }
+  }
+}
+
+.nav__underline {
+  position: relative;
+  display: block;
+  width: 100%;
+
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    width: 0;
+    height: 0.125em;
+    // background-color: $copy-color;
+    bottom: 0;
+    transition: all 0.2s ease-in-out;
+  }
+
+  &::before {
+    left: 50%;
+  }
+
+  &::after {
+    right: 50%;
+  }
+}
+</style>