<template>
  <div id="app" class="flex flex-col min-h-screen">
    <MainNavigationBar class="flex-none" />
    <RouterView class="flex-auto" v-slot="{ Component }">
      <Transition mode="out-in" name="app">
        <component :is="Component"></component>
      </Transition>
    </RouterView>
    <Footer class="flex-none" />
  </div>
</template>

<script setup lang="ts">
import * as log from 'loglevel';

import MainNavigationBar from '@/components/MainNavigationBar.vue';
import Footer from '@/components/Footer.vue';
import {onMounted} from 'vue';

log.debug('App created');

onMounted(() => {
  log.debug('App mounted');
});

</script>

<style lang="postcss" scoped>
.app-enter-active,
.app-leave-active {
  transition: opacity 0.3s ease;
}

.app-enter-from,
.app-leave-to {
  opacity: 0;
}

</style>
