various fixes

components/Common/ActionMenu.vue

@@ -4,7 +4,7 @@ de l'écran (ou au bas de l'écran sur les petits écrans)
 -->
 <template>
   <!-- Écrans larges : menu lateral, accroché au bord droit de l'écran -->
-  <div class="sticky-menu lateral" v-if="lgAndUp">
+  <div class="sticky-menu lateral" v-if="lgAndUp && isVisible">
     <v-row
       v-for="(action, index) in actionsOrDefault"
       :key="index"
@@ -26,7 +26,7 @@ de l'écran (ou au bas de l'écran sur les petits écrans)
   </div>
 
   <!-- Petits écrans : menu sous forme de bandeau en pied de page (sauf si le footer du site est visible) -->
-  <div class="sticky-menu band" v-else-if="!layoutStore.isFooterVisible">
+  <div class="sticky-menu band" v-else-if="isVisible">
     <v-btn
       v-for="(action, index) in actionsOrDefault"
       :key="index"
@@ -52,6 +52,10 @@ const { isMobileDevice } = useClientDevice()
 
 const telephoneNumber = "09 72 12 60 17";
 
+const isVisible: ComputedRef<boolean> = computed(() =>
+  !layoutStore.isHeaderVisible && !layoutStore.isFooterVisible
+)
+
 // Actions par défaut du menu, peut-être surchargé via la propriété `actions`
 const defaultActions: Array<ActionMenuItem> = [
   {

components/Common/MenuScroll.vue

@@ -12,14 +12,18 @@ 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">
+          <nuxt-link
+            v-if="isSticky"
+            :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
-                :class="{ active : isSticky && layoutStore.isAnchoredSectionOnScreen[menu.anchor] }"
+                :class="{ active : isSticky && menu.anchor === activeMenuItem }"
               >
                 {{ menu.label }}
               </v-list-item>
@@ -36,7 +40,7 @@ import type { PropType } from "@vue/runtime-core";
 import type { MenuScroll } from "~/types/interface";
 import { useLayoutStore } from "~/stores/layoutStore";
 
-const props = defineProps({
+defineProps({
   menus: {
     type: Array as PropType<Array < MenuScroll >>,
     required: true
@@ -47,6 +51,14 @@ const layoutStore = useLayoutStore()
 
 const isSticky: Ref<boolean> = ref(false);
 
+const activeMenuItem: ComputedRef<string | null> = computed(() => {
+  return Object.entries(
+    layoutStore.isAnchoredSectionOnScreen
+  ).find(
+    ([key, value]) => value === true
+  )?.[0] ?? null
+})
+
 const handleScroll = () => {
   isSticky.value = window.scrollY > 800;
 }

components/Layout/AnchoredSection.vue

@@ -45,18 +45,14 @@
 
     const active = screenVerticalCenter > top.value && screenVerticalCenter < bottom.value
 
-
     if (active !== layoutStore.isAnchoredSectionOnScreen[props.id]) {
-      nextTick(() => {
         layoutStore.setIsAnchoredSectionOnScreen(
           props.id,
           active
         )
-      })
     }
   }
 </script>
 
 <style scoped>
-
 </style>

components/Layout/Footer/Footer.vue

@@ -24,12 +24,12 @@
               </AgendaLink>
             </v-row>
             <v-row>
-              <AgendaLink to="/actualites">
+              <AgendaLink href="/actualites">
                 Actualités
               </AgendaLink>
             </v-row>
             <v-row>
-              <AgendaLink to="/annonces">
+              <AgendaLink href="/annonces">
                 Annonces
               </AgendaLink>
             </v-row>

components/Layout/Navigation.vue

@@ -2,9 +2,8 @@
 Menu Navigation
 -->
 <template>
-
   <!-- Navigation (écran large) -->
-  <div v-if="mdAndUp">
+  <div v-if="mdAndUp" v-intersect="onIntersect">
     <LayoutNavigationTopbar />
 
     <v-row class="navigation-lg" style="margin-top: 0 !important;">
@@ -122,6 +121,8 @@ Menu Navigation
 import { useDisplay } from "vuetify";
 import type { MainMenuItem } from "~/types/interface";
 import AgendaLink from "~/components/Common/AgendaLink.vue";
+import Footer from "~/components/Layout/Footer/Footer.vue";
+import { useLayoutStore } from "~/stores/layoutStore";
 const { mdAndUp } = useDisplay();
 
 const menu: Array<MainMenuItem> = [
@@ -202,6 +203,11 @@ const withAnimation = (callback: () => void) => {
   setTimeout(() => {isMenuOpen.value = true}, 85)
 }
 
+const layoutStore = useLayoutStore()
+const onIntersect = (isIntersecting: boolean) => {
+  layoutStore.setIsHeaderVisible(isIntersecting)
+}
+
 </script>
 
 <style scoped>

nuxt.config.ts

@@ -100,6 +100,11 @@ export default defineNuxtConfig({
     "@nuxt/devtools",
     'nuxt3-leaflet'
   ],
+  router: {
+    options: {
+      scrollBehaviorType: 'smooth'
+    }
+  },
   webfontloader: {
     google: {
       families: ["Barlow:300,400,500,700&display=swap"],

plugins/router.ts

@@ -1,14 +0,0 @@
-/**
- * Redéfinit le comportement du router quand on navigue vers une ancre
- */
-export default defineNuxtPlugin(({ $router }) => {
-  $router.options.scrollBehavior = (to: { hash: any}, from: any, savedPosition: any) => {
-    if (to.hash) {
-      return {
-        el: to.hash,
-        top: 30,
-        behavior: 'smooth'
-      }
-    }
-  }
-})

stores/layoutStore.ts

@@ -2,6 +2,12 @@ import type { Ref } from "@vue/reactivity";
 
 
 export const useLayoutStore = defineStore('layout', () => {
+  const isHeaderVisible: Ref<boolean> = ref(false)
+
+  const setIsHeaderVisible = (value: boolean) => {
+    isHeaderVisible.value = value
+  }
+
   const isFooterVisible: Ref<boolean> = ref(false)
 
   const setIsFooterVisible = (value: boolean) => {
@@ -15,6 +21,8 @@ export const useLayoutStore = defineStore('layout', () => {
   }
 
   return {
+    isHeaderVisible,
+    setIsHeaderVisible,
     isFooterVisible,
     setIsFooterVisible,
     isAnchoredSectionOnScreen,