feat: add SiteNavigation component

src/components/SiteNavigation.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import { RouterLink } from "vue-router";
+import NavToggle from "@/components/NavToggle.vue";
+
+interface Props {
+  isActive: boolean;
+}
+
+interface Route {
+  href: string;
+  title: string;
+}
+
+const routerLinks: Array<Route> = [
+  { href: "/", title: "Home" },
+  { href: "/anatomy", title: "Anatomy" },
+  { href: "/career-path", title: "Career Path" },
+];
+
+const props = defineProps<Props>();
+</script>
+
+<template>
+  <nav class="navigation" :class="{ open: props.isActive }">
+    <div class="navigation__background" @click="$emit('selected')"></div>
+
+    <NavToggle class="navigation__toggle" @click="$emit('selected')" />
+
+    <ul class="navigation__list">
+      <li
+        class="navigation__item"
+        v-for="(route, idx) in routerLinks"
+        :key="idx"
+      >
+        <RouterLink :to="route.href" @click="$emit('selected')">
+          {{ route.title }}
+        </RouterLink>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<style lang="scss">
+.navigation {
+  position: fixed;
+  z-index: 9000;
+
+  &__background {
+    position: fixed;
+
+    background-color: rgba(#000, 0);
+    backdrop-filter: blur(0rem);
+
+    transition: 1s;
+  }
+
+  &.open &__background {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    background-color: rgba(#000, 0.75);
+    backdrop-filter: blur(0.25rem);
+  }
+
+  &__toggle {
+    display: none;
+    position: fixed;
+    z-index: 9000;
+  }
+
+  &.open &__toggle {
+    display: flex;
+    top: 0;
+    left: 0;
+  }
+
+  &__list {
+    background-color: var(--color-navigation-background);
+    width: var(--navigation-width);
+
+    list-style: none;
+
+    margin: 0;
+    padding: 3.5rem 0 0 0;
+
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: -100vw;
+
+    transition: left ease-in-out 0.4s;
+  }
+
+  &.open &__list {
+    left: 0;
+  }
+
+  &__item {
+    font-size: var(--navigation-item-font-size);
+    line-height: var(--navigation-item-line-height);
+  }
+
+  a {
+    display: block;
+    font-weight: bold;
+    color: var(--color-router-link);
+    padding: 0 var(--container-spacing-right-safe) 0
+      var(--container-spacing-left-safe);
+
+    box-shadow: inset 0 0 0 0 var(--color-link-text-underline);
+
+    &:hover {
+      color: var(--color-router-link-hover);
+      box-shadow: inset var(--navigation-width) 0 0 0 var(--color-router-link);
+    }
+
+    &:before {
+      content: "👉";
+      font-size: 2rem;
+      margin: 0 1rem 0 0;
+    }
+
+    &.router-link-exact-active {
+      color: var(--color-router-link-active);
+    }
+  }
+}
+</style>