Add slide transition for route navigation

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

vue/src/App.vue

@@ -6,7 +6,11 @@ import Footer from "@/components/Footer.vue";
 
 <template>
     <Navbar class="no-print sticky" />
-    <RouterView />
+    <RouterView v-slot="{ Component }">
+        <Transition name="slide" mode="out-in">
+            <component :is="Component" :key="$route.path" />
+        </Transition>
+    </RouterView>
 
     <!-- <Footer style="height: 10vh" /> -->
 </template>

vue/src/assets/styles.css

@@ -1,5 +1,19 @@
 @import "tailwindcss";
 
+/* Route transitions */
+.slide-enter-active,
+.slide-leave-active {
+    transition: transform 0.3s ease, opacity 0.3s ease;
+}
+.slide-enter-from {
+    transform: translateX(30px);
+    opacity: 0;
+}
+.slide-leave-to {
+    transform: translateX(-30px);
+    opacity: 0;
+}
+
 /* PRINTING */
 @media print {