fix scroll menu behaviour and style

components/Common/MenuScroll.vue

@@ -67,7 +67,7 @@ const handleScroll = () => {
   display: flex;
   justify-content: center;
   background: var(--neutral-color);
-  color: var(--primary-color);
+  color: var(--on-neutral-color);
   font-size: 15px;
   line-height: 19px;
   align-items: center;
@@ -78,7 +78,7 @@ const handleScroll = () => {
 
   a {
     text-decoration: none;
-    color: var(--primary-color);
+    color: var(--on-primary-color);
   }
 
   a:hover {
@@ -87,7 +87,10 @@ const handleScroll = () => {
 }
 
 .active {
-  font-weight: 800;
+  background-color: var(--on-primary-color);
+  color: var(--primary-color);
+  border-radius: 16px;
+  padding: 5px;
 }
 </style>
 

components/Layout/AnchoredSection.vue

@@ -1,13 +1,11 @@
 <template>
-  <!--suppress VueUnrecognizedDirective -->
   <div
     :id="id"
     ref="section"
-    v-intersect="onIntersect"
+    v-scroll="onScroll"
   >
     <slot/>
   </div>
-
 </template>
 
 <script setup lang="ts">
@@ -30,36 +28,31 @@
 
   layoutStore.setIsAnchoredSectionOnScreen(props.id, false)
 
-  const onIntersect = (e: boolean) => {
-    layoutStore.setIsAnchoredSectionOnScreen(props.id, e)
-  }
+  const top: Ref<number | null> = ref(null)
+  const bottom: Ref<number | null> = ref(null)
+
+  onMounted(() => {
+    top.value = section.value!.offsetTop
+    bottom.value = section.value!.offsetTop + section.value!.offsetHeight
+  })
+
 
-  // TODO: supprimer si pas nécessaire, je conserve au cas où il faudrait un
-  //       fonctionnement plus fin qu'un simple intersect
-  // const top: Ref<number | null> = ref(null)
-  // const bottom: Ref<number | null> = ref(null)
-  //
-  // onMounted(() => {
-  //   top.value = section.value!.offsetTop
-  //   bottom.value = section.value!.offsetTop + section.value!.offsetHeight
-  // })
-  //
-  // const onScroll = (e: any) => {
-  //   if (top.value === null || bottom.value === null) {
-  //     return
-  //   }
-  //
-  //   const scroll: number = e.target.scrollingElement.scrollTop
-  //
-  //   const active = scroll > top.value && scroll < bottom.value
-  //
-  //   if (active !== layoutStore.isAnchoredSectionOnScreen[props.id]) {
-  //     layoutStore.setIsAnchoredSectionOnScreen(
-  //       props.id,
-  //       active
-  //     )
-  //   }
-  // }
+  const onScroll = (e: any) => {
+    if (top.value === null || bottom.value === null) {
+      return
+    }
+
+    const screenVerticalCenter = document.documentElement.scrollTop + window.innerHeight / 2
+
+    const active = screenVerticalCenter > top.value && screenVerticalCenter < bottom.value
+
+    if (active !== layoutStore.isAnchoredSectionOnScreen[props.id]) {
+      layoutStore.setIsAnchoredSectionOnScreen(
+        props.id,
+        active
+      )
+    }
+  }
 </script>
 
 <style scoped>

pages/opentalent_artist.vue

@@ -77,8 +77,8 @@ const stickyMenuActions: Array<ActionMenuItem> = [
 
 <style scoped lang="scss">
 .theme-artist {
-  --primary-color: var(--on-primary-color);
-  --on-primary-color: var(--primary-color);
+  --primary-color: #ffffff;
+  --on-primary-color: #0e2d32;
   --primary-color-alt: var(--on-secondary-color);
   --on-primary-color-alt: var(--artist-color);
   --secondary-color: var(--artist-color-light);

pages/opentalent_manager.vue

@@ -87,8 +87,8 @@ const stickyMenuActions: Array<ActionMenuItem> = [
 
 <style scoped>
 .theme-manager {
-  --primary-color: var(--on-primary-color);
-  --on-primary-color: var(--primary-color);
+  --primary-color: #ffffff;
+  --on-primary-color: #0e2d32;
   --on-primary-color-alt: var(--manager-color);
   --secondary-color: var(--manager-color-light);
 

pages/opentalent_school.vue

@@ -91,8 +91,8 @@ const stickyMenuActions: Array<ActionMenuItem> = [
 
 <style scoped lang="scss">
 .theme-school {
-  --primary-color: var(--on-primary-color);
-  --on-primary-color: var(--primary-color);
+  --primary-color: #ffffff;
+  --on-primary-color: #0e2d32;
   --primary-color-alt: var(--on-secondary-color);
   --on-primary-color-alt: var(--school-color);
   --secondary-color: var(--school-color-light);