feat:#24 add transition to routerview

frontend/src/App.vue

@@ -1,18 +1,25 @@
 <script lang="ts" setup>
 import MenuBar from "./components/MenuBar.vue";
-import {RouteRecordName, RouterView} from "vue-router";
+import { RouteRecordName, RouterView } from "vue-router";
 import CalendarPreview from "./components/CalendarPreview.vue";
 import moduleStore from "./store/moduleStore.ts";
 import { provide, ref } from "vue";
 
-const disabledPages = ["room-finder", "faq", "imprint", "privacy-policy", "edit", "edit-calendar"];
+const disabledPages = [
+  "room-finder",
+  "faq",
+  "imprint",
+  "privacy-policy",
+  "edit",
+  "edit-calendar",
+];
 
 const store = moduleStore();
 const mobilePage = ref(true);
 provide("mobilePage", mobilePage);
 
 const isDisabled = (routeName: RouteRecordName | null | undefined) => {
-  return !disabledPages.includes(routeName as string) && store.modules.size > 0
+  return !disabledPages.includes(routeName as string) && store.modules.size > 0;
 };
 
 const updateMobile = () => {
@@ -26,10 +33,25 @@ window.addEventListener("resize", updateMobile);
 
 <template>
   <MenuBar />
-  <RouterView />
+  <RouterView v-slot="{ Component }">
+    <transition name="scale" mode="out-in">
+      <component :is="Component" />
+    </transition>
+  </RouterView>
   <!-- show CalendarPreview but only on specific router views -->
-  <CalendarPreview v-if="isDisabled($route.name)"/>
+  <CalendarPreview v-if="isDisabled($route.name)" />
   <Toast />
 </template>
 
-<style scoped></style>
+<style scoped>
+.scale-enter-active,
+.scale-leave-active {
+  transition: all 0.2s ease;
+}
+
+.scale-enter-from,
+.scale-leave-to {
+  opacity: 0;
+  transform: scale(0.9);
+}
+</style>