[ui-dsfr] améliore la gestion des menus actifs dans la navigation

Author: ppinette

vertigo-ui-dsfr/src/components/DsfrHeader/DsfrCustomHeader.vue

@@ -3,8 +3,8 @@
  * /// SURCHARGE ///
  * Ce composant est une surcharge temporaire du composant dsfr-header
  * - Ajout d’un slot header-menu-link pour permettre l’usage du DsfrHeaderMenu
- * - [L221] ajout d’un slot header-search pour la barre de recherche
- *
+ * - Ajout d’un slot header-search pour la barre de recherche
+ * - Ajout d’un évenement dans le mounted pour la gestion du componentStates de navigation
  *
  */
 
@@ -49,6 +49,7 @@ const emit = defineEmits<{
   (e: 'update:modelValue', payload: string): void
   (e: 'search', payload: string): void
   (e: 'language-select', payload: DsfrLanguageSelectorElement): void
+  (e: 'on-mounted'): void
 }>()
 
 const languageSelector = toRef(props, 'languageSelector')
@@ -71,6 +72,7 @@ const onKeyDown = (e: KeyboardEvent) => {
 
 onMounted(() => {
   document.addEventListener('keydown', onKeyDown)
+  emit('on-mounted')
 })
 onUnmounted(() => {
   document.removeEventListener('keydown', onKeyDown)

vertigo-ui-dsfr/src/methods.js

@@ -42,5 +42,12 @@ export default {
                 disabled: object[disabledField]
             } // a label is always a string
         });
+    },
+    dsfrUpdateMenuNavigationActiveState: function () {
+        this.componentStates?.dsfrHeader?.navItems
+            .filter(item => item.title)
+            .forEach(item => {
+                item.active = item.links.some(link => window.location.pathname.startsWith(link.to));
+            });
     }
 }

vertigo-ui/src/main/resources/io/vertigo/ui/components/dsfr/layout/dsfr-header.html

@@ -8,6 +8,7 @@
     ></dsfr-skip-links>
 
     <dsfr-custom-header :quick-links="componentStates.dsfrHeader.quickLinks"
+                        @on-mounted="dsfrUpdateMenuNavigationActiveState"
                  th:attr="__${header_attrs}__">
         <template #mainnav>
             <dsfr-navigation :nav-items="componentStates.dsfrHeader.navItems">