60 lines
1.4 KiB
Vue
60 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import MainHeader from "@/Components/FlightsGoneBy/MainHeader.vue";
|
|
import MainFooter from "@/Components/FlightsGoneBy/MainFooter.vue";
|
|
import Radar from "@/Components/FlightsGoneBy/Radar.vue";
|
|
import { usePage, router } from "@inertiajs/vue3";
|
|
import { ref } from "vue";
|
|
import {SharedProps} from "@/Types/types";
|
|
|
|
const page = usePage<SharedProps>().props;
|
|
const transitionKey = ref(0);
|
|
|
|
router.on('success', () => {
|
|
transitionKey.value++;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Radar>
|
|
<div class="layoutContainer">
|
|
<MainHeader :key="transitionKey" />
|
|
<Transition name="fade" mode="out-in">
|
|
<main id="pageContainer" :key="transitionKey">
|
|
<slot />
|
|
</main>
|
|
</Transition>
|
|
<MainFooter :key="transitionKey" />
|
|
</div>
|
|
</Radar>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.layoutContainer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100dvh;
|
|
color: var(--text);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
header,
|
|
footer {
|
|
flex: 0 0 5dvh;
|
|
min-height: 3rem;
|
|
}
|
|
|
|
main {
|
|
flex: 1 1 auto;
|
|
background: transparent;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.fade-enter-from,
|
|
.fade-leave-to { opacity: 0; }
|
|
.fade-enter-active,
|
|
.fade-leave-active { transition: opacity 0.2s ease; }
|
|
</style>
|