<script setup lang="ts">
  import "@/styles/main.css";
  import SidebarView from "@/views/SidebarView.vue";
  import { RouterView } from "vue-router";

  import MainHeader from "./components/MainHeader.vue";
</script>

<template>
  <div class="container center with-sidebar">
    <main class="box stack">
      <MainHeader></MainHeader>

      <!--
        <RouterView v-slot="{ Component, route }">
          <Transition mode="out-in" name="fade">
            <component :is="Component" :key="route.path" />
          </Transition>
        </RouterView>
      -->
      <RouterView></RouterView>
    </main>

    <SidebarView></SidebarView>
  </div>
</template>

<style scoped lang="css">
  .fade-enter-active, .fade-leave-active {
    transition: opacity 0.2s linear;
  }

  .fade-enter-from, .fade-leave-to {
    opacity: 0;
  }
</style>
