Merge pull request #937 from dnum-mi/fix/bordure-en-tete

fix(DsfrHeader): 🐛 bordure en haut de navigation principale

Author: laruiss

demo-app/App.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import { useRoute } from 'vue-router'
 
+import { useRoute } from 'vue-router'
 import DsfrBreadcrumb from '../src/components/DsfrBreadcrumb/DsfrBreadcrumb.vue'
-import DsfrFooter from '../src/components/DsfrFooter/DsfrFooter.vue'
 
+import DsfrFooter from '../src/components/DsfrFooter/DsfrFooter.vue'
 import DsfrHeader, { type DsfrHeaderProps } from '../src/components/DsfrHeader/DsfrHeader.vue'
 import DsfrModal from '../src/components/DsfrModal/DsfrModal.vue'
 import DsfrNavigation, { type DsfrNavigationProps } from '../src/components/DsfrNavigation/DsfrNavigation.vue'
@@ -245,21 +245,25 @@ const licenceTo = undefined
 const licenceName = undefined
 const licenceLinkProps = undefined
 const ecosystemLinks = [
-  {
-    label: 'legifrance.gouv.fr',
-    href: 'https://legifrance.gouv.fr',
-  },
   {
     label: 'info.gouv.fr',
     href: 'https://info.gouv.fr',
+    title: 'Informations gouvernementales, nouvelle fenêtre',
   },
   {
     label: 'service-public.fr',
     href: 'https://service-public.fr',
+    title: 'Informations et démarches administratives, nouvelle fenêtre',
+  },
+  {
+    label: 'legifrance.gouv.fr',
+    href: 'https://legifrance.gouv.fr',
+    title: 'Service public de diffusion du droit, nouvelle fenêtre',
   },
   {
     label: 'data.gouv.fr',
     href: 'https://data.gouv.fr',
+    title: 'Plateforme des données publiques, nouvelle fenêtre',
   },
 ]
 
@@ -289,7 +293,7 @@ const currentRoute = computed(() => route.name)
       <h1>Demo VueDsfr</h1>
 
       <DsfrBreadcrumb
-        :links="[{ text: 'Accueil', to: '/' }, { text: currentRoute }]"
+        :links="[{ text: 'Accueil', to: '/' }, { text: (currentRoute as string) }]"
       />
 
       <router-view />
@@ -336,8 +340,4 @@ const currentRoute = computed(() => route.name)
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-
-.my-1 {
-  margin-block: 0.5rem;
-}
 </style>

src/components/DsfrHeader/DsfrHeader.types.ts

@@ -20,6 +20,7 @@ export type DsfrHeaderMenuLinkProps = {
    * @deprecated Use the prop `to` instead
    */
   path?: string
+  class?: string | Record<string, string> | Array<string | Record<string, string>>
 }
 
 export type DsfrHeaderProps = {

src/components/DsfrHeader/DsfrHeader.vue

@@ -273,19 +273,21 @@ provide(registerNavigationLinkKey, () => {
             </div>
           </div>
         </div>
-        <div
-          v-if="isWithSlotNav && !modalOpened"
-          class="fr-hidden fr-unhidden-lg"
-        >
-          <!-- @slot Slot nommé mainnav pour le menu de navigation principal -->
-          <slot
-            name="mainnav"
-            :hidemodal="hideModal"
-          />
-        </div>
         <!-- @slot Slot par défaut pour le contenu du fieldset (sera dans `<div class="fr-header__body-row">`) -->
         <slot />
       </div>
     </div>
+    <div class="fr-header__menu fr-modal">
+      <div
+        v-if="isWithSlotNav && !modalOpened"
+        class="fr-container"
+      >
+        <!-- @slot Slot nommé mainnav pour le menu de navigation principal -->
+        <slot
+          name="mainnav"
+          :hidemodal="hideModal"
+        />
+      </div>
+    </div>
   </header>
 </template>

src/components/DsfrHeader/docs-demo/DsfrHeaderDemo.vue

@@ -4,14 +4,14 @@ import { createRouter, createWebHistory } from 'vue-router'
 import type { DsfrLanguageSelectorElement } from '@/components/DsfrLanguageSelector/DsfrLanguageSelector.types'
 
 import VIcon from '../../VIcon/VIcon.vue'
-import DsfrHeader from '../DsfrHeader.vue'
+import DsfrHeader, { type DsfrHeaderProps } from '../DsfrHeader.vue'
 
 const logoText = ['Ministère', 'de l’intérieur']
 const serviceTitle = 'Nom du Site/Service'
 const serviceDescription = 'baseline - précisions sur l‘organisation'
 const placeholder = ''
 const homeTo = '/'
-const quickLinks = [
+const quickLinks: DsfrHeaderProps['quickLinks'] = [
   { label: 'Créer un espace', to: '/space/create', icon: 'ri-add-circle-line', iconRight: true },
   { label: 'Se connecter', to: '/login', class: 'fr-icon-user-fill' },
   { label: 'S’enregistrer', to: '/signup', icon: 'ri-account-circle-line', iconRight: true, iconAttrs: { animation: 'spin', speed: 'slow' } },