2025-02-21

src/App.vue

@@ -1,7 +1,33 @@
 <script setup lang="ts">
+  import "@/styles/main.css";
+  import { Transition } from "vue";
   import { RouterView } from "vue-router";
+  import SidebarView from "@/views/SidebarView.vue";
+  import MainHeader from "./components/MainHeader.vue";
 </script>
 
 <template>
-  <RouterView></RouterView>
+  <div class="container center with-sidebar">
+    <main class="box stack">
+      <MainHeader></MainHeader>
+
+      <RouterView v-slot="{ Component, route }">
+        <Transition name="fade" mode="out-in">
+          <component :is="Component" :key="route.path" />
+        </Transition>
+      </RouterView>
+    </main>
+
+    <SidebarView></SidebarView>
+  </div>
 </template>
+
+<style lang="css">
+  .fade-enter-active, .fade-leave-active {
+    transition: opacity 0.2s linear;
+  }
+
+  .fade-enter-from, .fade-leave-to {
+    opacity: 0;
+  }
+</style>