50 lines
1.1 KiB
Vue
50 lines
1.1 KiB
Vue
<template>
|
|
<div class="flex min-h-full flex-col">
|
|
<MainNavigationBar class="flex-none" />
|
|
<RouterView v-slot="{ Component }" class="flex-auto">
|
|
<Transition mode="out-in" name="app">
|
|
<component :is="Component" :key="componentKey"></component>
|
|
</Transition>
|
|
</RouterView>
|
|
<AppFooter class="flex-none" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import log from "loglevel";
|
|
|
|
import AppFooter from "@/components/AppFooter.vue";
|
|
import MainNavigationBar from "@/components/header/MainNavigationBar.vue";
|
|
import { graphqlClient } from "@/graphql/client";
|
|
import eventBus from "@/utils/eventBus";
|
|
import { provideClient } from "@urql/vue";
|
|
import { onMounted, ref } from "vue";
|
|
|
|
const componentKey = ref(1);
|
|
|
|
log.debug("App created");
|
|
|
|
provideClient(graphqlClient);
|
|
|
|
onMounted(() => {
|
|
log.debug("App mounted");
|
|
|
|
eventBus.on("switchedCourseSession", () => {
|
|
// FIXME: clean up with VBV-305
|
|
componentKey.value++;
|
|
});
|
|
});
|
|
</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>
|