From a8ef10498e7cc2fc4bfbc553d3ed2cb29bd29c0e Mon Sep 17 00:00:00 2001
From: Adam French <adam.a.french@outlook.com>
Date: Wed, 25 Mar 2026 21:35:41 +0000
Subject: [PATCH] Add slide transition for route navigation

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 vue/src/App.vue           |  6 +++++-
 vue/src/assets/styles.css | 14 ++++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/vue/src/App.vue b/vue/src/App.vue
index 94fc259..5a13b43 100644
--- a/vue/src/App.vue
+++ b/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>
diff --git a/vue/src/assets/styles.css b/vue/src/assets/styles.css
index b32575e..01656c7 100644
--- a/vue/src/assets/styles.css
+++ b/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 {