guard against same-route links

projects/frontend/src/components/shared/header-link.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { type HeaderEntry } from '@goldenwere/mackenzii-types'
+
 import { useRouteStore } from 'src/routes'
 
+import RouterLinkGuard from './router-link-guard.vue'
+
 const props = defineProps<{
   entry: HeaderEntry,
 }>()
@@ -29,7 +32,7 @@ li.header-entry
     :target='entry.target || "_self"'
   )
     span {{ entry.displayName }}
-  router-link(
+  RouterLinkGuard(
     v-else
     :to='{ name }'
     :target='entry.target || "_self"'

projects/frontend/src/components/shared/router-link-guard.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { RouterLink, useRouter } from 'vue-router'
+
+import { getCurrentRoute } from 'src/utilities/vuetils'
+
+const props = defineProps({
+  // @ts-ignore
+  ...RouterLink.props,
+})
+
+let route = ref(getCurrentRoute())
+const router = useRouter()
+const to = router.resolve(props.to)
+const isExternalLink = computed(() => typeof props.to === 'string' && props.to.startsWith('http'))
+const isCurrentRoute = computed(() => to.fullPath === route.value.fullPath)
+router.afterEach(() => {
+  route.value = getCurrentRoute()
+})
+</script>
+
+<template lang="pug">
+span
+  a.external-link(
+    v-if='isExternalLink'
+  )
+    slot
+  span.current-route(
+    v-else-if='isCurrentRoute'
+  )
+    slot
+  router-link(
+    v-else
+    v-bind='$props'
+    custom
+    v-slot='{ href, navigate }'
+  )
+    a(
+      v-bind='$attrs'
+      :href='href'
+      @click='navigate'
+    )
+      slot
+</template>