refactor: split up navigation components for easier i18n

src/App.vue

@@ -3,10 +3,19 @@ import { RouterView } from "vue-router";
 import SiteNavigation from "@/components/SiteNavigation.vue";
 import SiteFooter from "@/components/SiteFooter.vue";
 import { version } from "../package.json";
+import NavigationItem from "@/components/NavigationItem.vue";
+import router from "@/router";
 </script>
 
 <template>
-  <SiteNavigation />
+  <SiteNavigation>
+    <NavigationItem
+      v-for="(route, idx) in router.options.routes"
+      :key="idx"
+      :icon="route.meta?.icon"
+      :href="route.path"
+    >{{ $t(`${route.meta?.title}`) }}</NavigationItem>
+  </SiteNavigation>
 
   <main>
     <RouterView />

src/components/NavigationItem.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { RouterLink } from "vue-router";
+
+interface Props {
+  icon: unknown | object;
+  href: string;
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+  <RouterLink class="navigation__link" :to="href">
+    <component class="navigation__link-icon" :is="icon"></component>
+    <span class="navigation__link-text">
+      <slot></slot>
+    </span>
+  </RouterLink>
+</template>
+
+<style lang="scss">
+.navigation {
+  &__link {
+    flex: var(--navigation-link-flex);
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: var(--navigation-link-justify);
+    align-items: center;
+
+    height: var(--navigation-link-height);
+
+    padding: var(--navigation-link-padding);
+
+    color: var(--color-router-link);
+    box-shadow: none;
+
+    &:hover {
+      box-shadow: var(--navigation-link-box-shadow);
+
+      svg {
+        fill: var(--color-router-link-hover);
+      }
+    }
+
+    &:hover &-text {
+      color: var(--color-router-link-hover);
+    }
+
+    &:last-child {
+      margin: var(--navigation-link-last-child-margin);
+    }
+
+    > * {
+      flex: 1 0 0;
+    }
+
+    &.router-link-exact-active {
+      color: var(--color-router-link-hover);
+      background-color: var(--color-router-link);
+
+      &:hover {
+        color: var(--color-router-link-hover);
+      }
+
+      svg {
+        fill: var(--color-router-link-hover);
+      }
+    }
+  }
+
+  &__link-icon {
+    width: var(--navigation-link-icon-size);
+    min-width: var(--navigation-link-icon-size);
+    max-width: var(--navigation-link-icon-size);
+    margin: 0 var(--navigation-link-icon-spacing);
+    fill: var(--color-router-link);
+  }
+
+  &__link-text {
+    display: var(--navigation-link-display);
+    font-size: var(--navigation-link-text-font-size);
+    margin: 0 0 0 1rem;
+    white-space: nowrap;
+  }
+}
+</style>

src/components/SiteNavigation.vue

@@ -6,20 +6,7 @@ import { RouterLink } from "vue-router";
 <template>
   <nav class="navigation">
     <div class="navigation__list">
-      <RouterLink
+      <slot></slot>
-        class="navigation__link"
-        v-for="(route, idx) in router.options.routes"
-        :key="idx"
-        :to="route.path"
-      >
-        <component
-          class="navigation__link-icon"
-          :is="route.meta?.icon"
-        ></component>
-        <span class="navigation__link-text">
-          {{ route.meta?.title }}
-        </span>
-      </RouterLink>
     </div>
   </nav>
 </template>
@@ -51,68 +38,5 @@ import { RouterLink } from "vue-router";
     width: 100%;
     height: 100%;
   }
-
-  &__link {
-    flex: var(--navigation-link-flex);
-    display: flex;
-    flex-flow: row nowrap;
-    justify-content: var(--navigation-link-justify);
-    align-items: center;
-
-    height: var(--navigation-link-height);
-
-    padding: var(--navigation-link-padding);
-
-    color: var(--color-router-link);
-    box-shadow: none;
-
-    &:hover {
-      box-shadow: var(--navigation-link-box-shadow);
-
-      svg {
-        fill: var(--color-router-link-hover);
-      }
-    }
-
-    &:hover &-text {
-      color: var(--color-router-link-hover);
-    }
-
-    &:last-child {
-      margin: var(--navigation-link-last-child-margin);
-    }
-
-    > * {
-      flex: 1 0 0;
-    }
-
-    &.router-link-exact-active {
-      color: var(--color-router-link-hover);
-      background-color: var(--color-router-link);
-
-      &:hover {
-        color: var(--color-router-link-hover);
-      }
-
-      svg {
-        fill: var(--color-router-link-hover);
-      }
-    }
-  }
-
-  &__link-icon {
-    width: var(--navigation-link-icon-size);
-    min-width: var(--navigation-link-icon-size);
-    max-width: var(--navigation-link-icon-size);
-    margin: 0 var(--navigation-link-icon-spacing);
-    fill: var(--color-router-link);
-  }
-
-  &__link-text {
-    display: var(--navigation-link-display);
-    font-size: var(--navigation-link-text-font-size);
-    margin: 0 0 0 1rem;
-    white-space: nowrap;
-  }
 }
 </style>