fix links and scrollMenu erratic behavior

app.vue

@@ -1,4 +1,6 @@
 <template>
+  <div id="top" />
+
   <LayoutNavigation />
 
   <nuxt-page />

components/Common/MenuScroll.vue

@@ -2,7 +2,7 @@
 Menu de navigation entre les sections d'une page, accrochée au haut de l'écran sur les écrans larges
 -->
 <template>
-  <LayoutContainer>
+  <LayoutContainer v-scroll="handleScroll">
     <v-row>
       <v-col
         cols="12"
@@ -12,6 +12,10 @@ Menu de navigation entre les sections d'une page, accrochée au haut de l'écran
           density="compact"
           :class="{ 'sticky-menu': isSticky }"
         >
+          <nuxt-link :to="{ path: '', hash: '#top' }" class="px-3 py-1">
+            <v-icon icon="fa fa-angle-up" />
+          </nuxt-link>
+
           <div v-for="menu in menus" :key="menu.anchor">
             <nuxt-link :to="{ path: '', hash: '#' + menu.anchor }">
               <v-list-item
@@ -43,10 +47,6 @@ const layoutStore = useLayoutStore()
 
 const isSticky: Ref<boolean> = ref(false);
 
-onMounted(() => {
-  window.addEventListener('scroll', handleScroll);
-})
-
 const handleScroll = () => {
   isSticky.value = window.scrollY > 800;
 }

components/Layout/AnchoredSection.vue

@@ -36,7 +36,6 @@
     bottom.value = section.value!.offsetTop + section.value!.offsetHeight
   })
 
-
   const onScroll = (e: any) => {
     if (top.value === null || bottom.value === null) {
       return
@@ -46,11 +45,14 @@
 
     const active = screenVerticalCenter > top.value && screenVerticalCenter < bottom.value
 
+
     if (active !== layoutStore.isAnchoredSectionOnScreen[props.id]) {
-      layoutStore.setIsAnchoredSectionOnScreen(
-        props.id,
-        active
-      )
+      nextTick(() => {
+        layoutStore.setIsAnchoredSectionOnScreen(
+          props.id,
+          active
+        )
+      })
     }
   }
 </script>

components/Layout/FAQ.vue

@@ -12,7 +12,7 @@
         </h3>
 
         <v-btn
-          to="https://ressources.opentalent.fr/"
+          href="https://ressources.opentalent.fr/"
           target="_blank"
           class="btn-faq inv-theme"
         >
@@ -22,7 +22,7 @@
 
       <div class="d-flex flex-column justify-center links">
         <v-btn
-          to="https://ressources.opentalent.fr/pages/viewpage.action?pageId=75170564"
+          href="https://ressources.opentalent.fr/pages/viewpage.action?pageId=75170564"
           target="_blank"
         >
           <div>
@@ -37,7 +37,7 @@
         </v-btn>
 
         <v-btn
-          to="https://ressources.opentalent.fr/?contact"
+          href="https://ressources.opentalent.fr/?contact"
           target="_blank"
         >
           <div>

components/Layout/Footer/Footer.vue

@@ -158,35 +158,35 @@
       </div>
 
       <!-- Troisième section alt : version petits écrans -->
-      <v-row v-if="mdAndDown">
-        <v-col cols="12" >
-          <div v-for="(item, index) in footerLinks" :key="index">
-            <v-container>
-              <div class="section" @click="toggleSection(index)">
-                <div class="d-flex flex-row justify-space-between">
-                  {{ item.label }}
-
-                  <v-icon
-                    :icon="isActive(index) ? 'fas fa-chevron-up' : 'fas fa-chevron-down'"
-                  />
-                </div>
-
-                <div
-                  v-show="isActive(index)"
-                  v-for="(sublink, sublinkIndex) in item.sublink"
-                  :key="sublinkIndex"
-                  class="mt-3"
-                >
-                  <nuxt-link :to="sublink.link">
-                    {{ sublink.label }}
-                  </nuxt-link>
-                </div>
-              </div>
-            </v-container>
-
-          </div>
-        </v-col>
-      </v-row>
+<!--      <v-row v-if="mdAndDown">-->
+<!--        <v-col cols="12" >-->
+<!--          <div v-for="(item, index) in footerLinks" :key="index">-->
+<!--            <v-container>-->
+<!--              <div class="section" @click="toggleSection(index)">-->
+<!--                <div class="d-flex flex-row justify-space-between">-->
+<!--                  {{ item.label }}-->
+
+<!--                  <v-icon-->
+<!--                    :icon="isActive(index) ? 'fas fa-chevron-up' : 'fas fa-chevron-down'"-->
+<!--                  />-->
+<!--                </div>-->
+
+<!--                <div-->
+<!--                  v-show="isActive(index)"-->
+<!--                  v-for="(sublink, sublinkIndex) in item.sublink"-->
+<!--                  :key="sublinkIndex"-->
+<!--                  class="mt-3"-->
+<!--                >-->
+<!--                  <nuxt-link :href="sublink.link">-->
+<!--                    {{ sublink.label }}-->
+<!--                  </nuxt-link>-->
+<!--                </div>-->
+<!--              </div>-->
+<!--            </v-container>-->
+
+<!--          </div>-->
+<!--        </v-col>-->
+<!--      </v-row>-->
 
       <div class="footnotes">
         <v-row justify="center">
@@ -246,7 +246,7 @@ const footerLinks = ref([
     sublink: [
       {
         label: "Opentalent Artist",
-        link: "/opentalent_artist)",
+        link: "/opentalent_artist",
       },
       {
         label: "Opentalent School",
@@ -263,7 +263,7 @@ const footerLinks = ref([
     sublink: [
       {
         label: "Qui sommes-nous",
-        link: "/qui-sommes-nous)",
+        link: "/qui-sommes-nous",
       },
       {
         label: "Nous rejoindre",
@@ -280,7 +280,7 @@ const footerLinks = ref([
     sublink: [
       {
         label: "Foire Aux Questions ",
-        link: "/ https://ressources.opentalent.fr/)",
+        link: "/ https://ressources.opentalent.fr",
       },
       {
         label: "Support en ligne ",

components/Layout/Footer/Prefooter.vue

@@ -8,7 +8,7 @@ Première section du footer (galerie des logiciels)
       <v-row>
 
         <v-col cols="4" class="text-center">
-          <nuxt-link href="/opentalent_artist">
+          <nuxt-link to="/opentalent_artist">
             <v-img src="/images/logo/logiciels/Artist-noir.png"/>
           </nuxt-link>
 
@@ -20,7 +20,7 @@ Première section du footer (galerie des logiciels)
         <v-divider :vertical="true" />
 
         <v-col cols="4" class="text-center">
-          <nuxt-link href="/opentalent_school">
+          <nuxt-link to="/opentalent_school">
             <v-img src="/images/logo/logiciels/School-noir.png"/>
           </nuxt-link>
 
@@ -32,7 +32,7 @@ Première section du footer (galerie des logiciels)
         <v-divider :vertical="true" />
 
         <v-col cols="3" class="text-center">
-          <nuxt-link href="/opentalent_manager">
+          <nuxt-link to="/opentalent_manager">
             <v-img src="/images/logo/logiciels/Manager-noir.png"/>
           </nuxt-link>
 

components/Layout/Navigation.vue

@@ -78,11 +78,11 @@ Menu Navigation
         <v-icon left class="fas fa-phone icon"></v-icon>
       </v-btn>
 
-      <nuxt-link to="/agenda-culturel" style="text-decoration: none">
+      <AgendaLink href="/agenda-culturel" style="text-decoration: none">
         <v-btn text>
           <v-icon left class="fas fa-calendar icon"></v-icon>
         </v-btn>
-      </nuxt-link>
+      </AgendaLink>
     </v-app-bar>
 
     <!-- Tiroir de navigation principal -->
@@ -121,6 +121,7 @@ Menu Navigation
 <script setup lang="ts">
 import { useDisplay } from "vuetify";
 import type { MainMenuItem } from "~/types/interface";
+import AgendaLink from "~/components/Common/AgendaLink.vue";
 const { mdAndUp } = useDisplay();
 
 const menu: Array<MainMenuItem> = [

components/Layout/Navigation/Topbar.vue

@@ -8,20 +8,19 @@
         Se connecter
       </v-btn>
 
-      <v-btn
-        to="/agenda-culturel"
-        prepend-icon="fas fa-calendar"
-        class="btn-agenda"
-      >
-          Agenda Culturel
-      </v-btn>
+      <AgendaLink href="/agenda-culturel">
+        <v-btn
+          prepend-icon="fas fa-calendar"
+          class="btn-agenda"
+        >
+            Agenda Culturel
+        </v-btn>
+      </AgendaLink>
   </div>
 </template>
 
 <script setup lang="ts">
-import { useDisplay } from "vuetify";
-
-const { mdAndDown } = useDisplay();
+import AgendaLink from "~/components/Common/AgendaLink.vue";
 </script>
 
 <style scoped lang="scss">