nemunaire/travel-steps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

frontend: auto scroll post menu

Browse source 
Signed-off-by: Nicolas Froger <nicolas@kektus.xyz>
This commit is contained in:
Nicolas Froger 2024-07-25 12:51:36 +02:00
commit 208fb1fbc7
No known key found for this signature in database
1 changed files with 12 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

14
summer2024-frontend/src/views/PostsView.vue
View file

@ -18,6 +18,7 @@ const fullpageOptions = ref({
credits: { enabled: false }
})
const menu = ref(null)
const menuItems = ref([])
let fullPageInit = false;
onMounted(() => {
@ -36,6 +37,15 @@ function onLeave(origin, destination, direction, trigger) {
menu.value.classList.add('opacity-0')
} else {
menu.value.classList.remove('opacity-0')
for (const menuItem of menuItems.value) {
if (menuItem.dataset.menuanchor === destination.anchor) {
menuItem.scrollIntoView({
behavior: "smooth",
inline: "center"
});
break;
}
}
}
}
@ -53,10 +63,10 @@ function afterLoad(origin, destination, direction, trigger) {
>
<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"
class="scrollable-element col-start-1 col-span-full row-start-1 max-h-52 h-fit 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">
<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" ref="menuItems">
<a :href="'#post-' + post.id" class="block text-right px-4 py-3 transition-all duration-300">{{ post.formatedDate }}</a>
</li>
</ul>