frontend: auto scroll post menu

Signed-off-by: Nicolas Froger <nicolas@kektus.xyz>

summer2024-frontend/src/views/PostsView.vue

@@ -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>