feat(transition): adds basic route transition

Author: dvcol

src/components/AppComponent.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Transition } from 'vue';
 import { RouterView } from 'vue-router';
 
 import { NavbarComponent } from '~/components/common';
@@ -14,7 +15,11 @@ const { isAuthenticated } = useSettingsStoreRefs();
     <NavbarComponent />
   </header>
   <main>
-    <RouterView />
+    <RouterView v-slot="{ Component, route }">
+      <Transition name="scale" mode="out-in">
+        <component :is="Component" :key="route.path" />
+      </Transition>
+    </RouterView>
   </main>
 </template>
 
@@ -44,4 +49,15 @@ main {
   justify-content: center;
   padding: 0 2rem;
 }
+
+.scale-enter-active,
+.scale-leave-active {
+  transition: all 0.25s ease;
+}
+
+.scale-enter-from,
+.scale-leave-to {
+  transform: scale(0.95);
+  opacity: 0;
+}
 </style>

src/components/common/navbar/NavbarComponent.vue

@@ -18,7 +18,7 @@ const routes = [Route.Progress, Route.Calendar, Route.History, Route.List, Route
 
 <template>
   <nav>
-    <NTabs :value="route.name" class="tabs" type="segment" justify-content="space-evenly" animated>
+    <NTabs :value="route.name?.toString()" class="tabs" type="segment" justify-content="space-evenly" animated>
       <template v-for="_route in routes" :key="_route">
         <NTab class="tab" :name="_route.toLowerCase()" type="segment" @click="navigate(_route)">
           {{ i18n(_route.toLowerCase()) }}