62 lines
1.9 KiB
Vue
62 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import {RouterView} from 'vue-router'
|
|
import NavBar from '@components/Navbar.vue'
|
|
import {onMounted, onUnmounted, ref, watch} from 'vue'
|
|
import {updateIsMobile, routerTransitioning} from "@/globals.ts";
|
|
|
|
let resizeObserver: ResizeObserver | null = null;
|
|
|
|
const isFooterFixed = ref(document.documentElement.scrollHeight <= window.innerHeight);
|
|
|
|
watch(() => document.documentElement.scrollHeight, () => {
|
|
console.debug('Document height changed, updating footer position');
|
|
updateFooterPosition();
|
|
});
|
|
|
|
const updateFooterPosition = () => {
|
|
isFooterFixed.value = document.documentElement.scrollHeight <= window.innerHeight;
|
|
};
|
|
|
|
onMounted(() => {
|
|
resizeObserver = new ResizeObserver(() => updateFooterPosition());
|
|
resizeObserver.observe(document.documentElement)
|
|
window.addEventListener("resize", updateIsMobile)
|
|
});
|
|
onUnmounted(() => {
|
|
window.removeEventListener("resize", updateIsMobile)
|
|
if (resizeObserver) resizeObserver.disconnect();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<NavBar/>
|
|
<div class="router-view">
|
|
<RouterView v-slot="{Component}">
|
|
<template v-if="Component">
|
|
<transition name="fade-tabs" mode="out-in" appear @before-enter="routerTransitioning=true"
|
|
@after-enter="routerTransitioning = false">
|
|
<component :is="Component"/>
|
|
</transition>
|
|
</template>
|
|
<template v-else>
|
|
Loading...
|
|
</template>
|
|
</RouterView>
|
|
</div>
|
|
<div class="footer" :class="{ 'footer-fixed': isFooterFixed }">
|
|
<div class="footer-content">
|
|
<p style="text-align: center; margin-top: 1rem">©2025 <a href="https://github.com/L10nhunter">L10nhunter</a>.
|
|
All rights reserved.</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.footer-fixed {
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
}
|
|
</style>
|