Updated to latest vue build

src/App.vue

@@ -5,7 +5,7 @@ import { RouterView } from 'vue-router'
 <template>
   <div id="wrapper" class="py-16 px-8">
     <RouterView v-slot="{ Component }">
-      <Transition mode="out-in">
+      <Transition name="fade" mode="out-in">
         <component :is="Component" />
       </Transition>
     </RouterView>

src/components/YrhButton.vue

@@ -46,7 +46,17 @@ const attributes = {
   disabled: props.disabled
 }
 
-const elementTag = computed(() => (props.href ? 'a' : 'button'))
+const isInternalLink = computed(() => props.href && props.href.charAt(0) === '/')
+
+const elementTag = computed(() => {
+  if (props.href) {
+    if (isInternalLink.value) {
+      return 'router-link'
+    }
+    return 'a'
+  }
+  return 'button'
+})
 </script>
 
 <template>
@@ -54,7 +64,8 @@ const elementTag = computed(() => (props.href ? 'a' : 'button'))
     ref="btnRef"
     :is="elementTag"
     v-bind="attributes"
-    class="btn w-full p-1 px-2 text-left bg-y-beige-500 hover:shadow-md focus-visible:shadow-md"
+    :to="isInternalLink ? props.href : null"
+    class="btn inline-block w-full p-1 px-2 text-left bg-y-beige-500 hover:shadow-md focus-visible:shadow-md"
     :class="{ active: isActive }"
     @mousedown="handleClick"
     @keyup.enter="handleClick"

src/router/index.ts

@@ -1,5 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
+
 import HomeView from '../views/HomeView.vue'
+import DataView from '../views/DataView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -8,6 +10,11 @@ const router = createRouter({
       path: '/',
       name: 'home',
       component: HomeView
+    },
+    {
+      path: '/data',
+      name: 'data',
+      component: DataView
     }
   ]
 })

src/views/DataView.vue

@@ -0,0 +1,3 @@
+<template>
+  <main>data view</main>
+</template>

src/views/HomeView.vue

@@ -15,7 +15,8 @@ const availableRoutes: MenuItem[] = [
   {
     id: 'current-data',
     label: 'Current Data',
-    bannerText: 'Search through current file data'
+    bannerText: 'Search through current file data',
+    href: '/data'
   },
   {
     id: 'settings',
@@ -71,8 +72,7 @@ function switchActiveRoute(key: string | null) {
         <YrhNav :items="availableRoutes" @change-nav="switchActiveRoute" />
       </div>
       <Transition name="fade" mode="out-in">
-        <YrhNav v-if="activeRoute === 'current-data'" :items="settingsOptions" />
-        <YrhNav v-else-if="activeRoute === 'settings'" :items="settingsOptions" />
+        <YrhNav v-if="activeRoute === 'settings'" :items="settingsOptions" />
         <YrhNav v-else-if="activeRoute === 'credits'" :items="settingsOptions" />
       </Transition>
     </div>