<script setup>
import TheHeader from '@/components/TheHeader.vue'
import TheFooter from '@/components/TheFooter.vue'
</script>

<template>
  <TheHeader />
  <main>
    <RouterView v-slot="{ Component }">
      <transition name="route-fade" mode="out-in">
        <component :is="Component" />
      </transition>
    </RouterView>
  </main>
  <TheFooter />
</template>

<style scoped>
main {
  flex: 1;
  padding-top: var(--nav-height);
}
</style>
