88 lines
2.4 KiB
Vue
88 lines
2.4 KiB
Vue
<script setup>
|
|
import PostComponent from '@/components/PostComponent.vue'
|
|
import { usePostsStore } from '@/stores/posts.js'
|
|
import { onMounted, ref } from 'vue'
|
|
import WelcomeComponent from '@/components/WelcomeComponent.vue'
|
|
|
|
const postsStore = usePostsStore()
|
|
|
|
const fullpage = ref(null)
|
|
const fullpageOptions = ref({
|
|
licenseKey: 'gplv3-license',
|
|
menu: '#menu',
|
|
scrollBar: true,
|
|
normalScrollElements: '.scrollable-element',
|
|
scrollOverflow: false,
|
|
onLeave: onLeave,
|
|
afterLoad: afterLoad,
|
|
credits: { enabled: false }
|
|
})
|
|
const menu = ref(null)
|
|
let fullPageInit = false;
|
|
|
|
onMounted(() => {
|
|
postsStore.fetchPosts().then(() => {
|
|
if (!fullPageInit) {
|
|
fullpage.value.init();
|
|
fullPageInit = true;
|
|
} else {
|
|
fullpage.value.build();
|
|
}
|
|
});
|
|
})
|
|
|
|
function onLeave(origin, destination, direction, trigger) {
|
|
if (destination.anchor === 'welcome-section') {
|
|
menu.value.classList.add('opacity-0')
|
|
} else {
|
|
menu.value.classList.remove('opacity-0')
|
|
}
|
|
}
|
|
|
|
function afterLoad(origin, destination, direction, trigger) {
|
|
if (destination.anchor === 'welcome-section') {
|
|
menu.value.classList.add('opacity-0')
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
id="menu-grid"
|
|
class="fixed z-50 h-full w-full grid grid-cols-5 grid-rows-3 place-items-stretch pointer-events-none"
|
|
>
|
|
<ul
|
|
id="menu"
|
|
class="scrollable-element col-start-1 col-span-full row-start-1 row-span-1 mt-16 lg:m-0 lg:col-start-5 lg:col-span-1 lg:row-start-3 lg:row-span-1 pointer-events-auto overflow-y-scroll transition-opacity duration-1000 opacity-0"
|
|
ref="menu"
|
|
>
|
|
<li :data-menuanchor="'post-' + post.id" v-for="post in postsStore.posts" :key="post.id" class="m-2 backdrop-blur-sm rounded-lg bg-black/10 hover:bg-gray-500/10 transition-colors duration-200">
|
|
<a :href="'#post-' + post.id" class="block text-right px-4 py-3 transition-all duration-300">{{ post.formatedDate }}</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<full-page
|
|
id="fullpage"
|
|
ref="fullpage"
|
|
:options="fullpageOptions"
|
|
@on-leave="onLeave"
|
|
@after-load="afterLoad"
|
|
:skip-init="true"
|
|
>
|
|
<WelcomeComponent />
|
|
<PostComponent class="section" v-for="post in postsStore.posts" :key="post.id" :post="post" />
|
|
</full-page>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
#menu li.active,
|
|
#menu li.active:hover {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
#menu li.active a,
|
|
#menu li.active:hover a:hover {
|
|
font-weight: bold;
|
|
}
|
|
</style>
|