feat(DSFR.breadcrumb): switch to DSFR breadcrumb style since it is part of new service UI

2022-08-17 13:53:07 +02:00 · 2022-08-17 13:53:07 +02:00 · 549eda6fe3
commit 549eda6fe3
parent 05dfc93b7e
40 changed files with 194 additions and 160 deletions
--- a/app/assets/stylesheets/breadcrumb.scss
+++ b/app/assets/stylesheets/breadcrumb.scss
@ -1,27 +0,0 @@
-@import "colors";
-@import "constants";
-
-.breadcrumbs {
-  li {
-    display: inline-block;
-    font-weight: bold;
-    font-size: 14px;
-
-    a {
-      color: $black;
-      text-decoration: underline;
-    }
-
-    &::after {
-      content: " > ";
-    }
-
-    &:last-child {
-      color: $blue-france-500;
-
-      &::after {
-        content: none;
-      }
-    }
-  }
-}
--- a/app/views/administrateurs/_breadcrumbs.html.haml
+++ b/app/views/administrateurs/_breadcrumbs.html.haml
@ -1,14 +1,32 @@
 #breadcrumbs.sub-header
  .container.flex.justify-between.align-baseline.column
-    %ul.breadcrumbs.mt-1.mb-3
-      - steps.each do |step|
-        %li= step
+    %nav.fr-breadcrumb.mt-0{ role: "navigation", aria: { label: t('you_are_here', scope: [:layouts, :breadcrumb]) } }
+      %button.fr-breadcrumb__button{ aria: { expanded: "false", controls: "breadcrumb-1" } }
+        = t('show', scope: [:layouts, :breadcrumb])
+
+      .fr-collapse#breadcrumb-1
+        %ol.fr-breadcrumb__list
+          %li= link_to t('root', scope: [:layouts, :breadcrumb]), root_path, class: 'fr-breadcrumb__link'
+          - steps.each.with_index do |step, i|
+            - if i == steps.size - 1
+              %li{ aria: {current: "page"}}
+                %span.fr-breadcrumb__link= step[0]
+            - else
+              %li= link_to step[0], step[1], class: 'fr-breadcrumb__link'
+
    - if defined?(preview) && preview
      .mb-2
-        = link_to "Prévisualiser le formulaire", apercu_admin_procedure_path(@procedure), target: "_blank", rel: "noopener", class: 'button'
-        = link_to "Continuer >", admin_procedure_path(@procedure), title: 'Vous pourrez revenir ici par la suite', class: 'button accepted'
+        = link_to t('preview', scope: [:layouts, :breadcrumb]), apercu_admin_procedure_path(@procedure), target: "_blank", rel: "noopener", class: 'button'
+        = link_to t('continue', scope: [:layouts, :breadcrumb]), admin_procedure_path(@procedure), title: t('continue_title', scope: [:layouts, :breadcrumb]), class: 'button accepted'

    - if defined?(metadatas)
-      %ul.admin-metadata
-        - metadatas.each do |metadata|
-          %li= metadata
+      .metadatas.pb-3
+        %h1= t('created_at', number: @procedure.id, date: @procedure.created_at.strftime('%d/%m/%Y'), scope: [:layouts, :breadcrumb])
+        - if @procedure.close?
+          %h2= t('closed_at', date: @procedure.closed_at.strftime('%d/%m/%Y'), scope: [:layouts, :breadcrumb])
+        %p
+          - if @procedure.locked?
+            = t('published', scope: [:layouts, :breadcrumb])
+            = link_to procedure_lien(@procedure), procedure_lien(@procedure)
+          - else
+            = t('draft', scope: [:layouts, :breadcrumb])
--- a/app/views/administrateurs/archives/index.html.haml
+++ b/app/views/administrateurs/archives/index.html.haml
@ -1,7 +1,7 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
-                    'Export et Archives'] }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
+                    ['Export et Archives']] }


 .container
--- a/app/views/administrateurs/attestation_templates/edit.html.haml
+++ b/app/views/administrateurs/attestation_templates/edit.html.haml
@ -1,9 +1,9 @@
 - content_for(:root_class, 'scroll-margins-for-sticky-footer')

 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
-                    'Attestation'] }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
+                    ['Attestation']] }

 .procedure-form#attestation-template-edit
  .procedure-form__columns.container
--- a/app/views/administrateurs/dossier_submitted_messages/edit.html.haml
+++ b/app/views/administrateurs/dossier_submitted_messages/edit.html.haml
@ -1,9 +1,9 @@
 - content_for(:root_class, 'scroll-margins-for-sticky-footer')

 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
-                    'Fin de dépot'] }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
+                    ['Fin de dépot']] }

 .procedure-form
  .procedure-form__columns.container
--- a/app/views/administrateurs/experts_procedures/index.html.haml
+++ b/app/views/administrateurs/experts_procedures/index.html.haml
@ -1,7 +1,7 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
-                    'Liste des experts'] }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
+                    ['Liste des experts']] }

 .container
  %h1.page-title.mt-2 Experts invités sur #{@procedure.libelle}
--- a/app/views/administrateurs/groupe_instructeurs/index.html.haml
+++ b/app/views/administrateurs/groupe_instructeurs/index.html.haml
@ -1,13 +1,13 @@
 - if @procedure.routee?
  = render partial: 'administrateurs/breadcrumbs',
-    locals: { steps: [link_to(t('.procedures'), admin_procedures_path),
-                      link_to(@procedure.libelle, admin_procedure_path(@procedure)),
-                      t('.instructors_group')] }
+    locals: { steps: [[t('.procedures'), admin_procedures_path],
+                      [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
+                      [t('.instructors_group')]] }
 - else
  = render partial: 'administrateurs/breadcrumbs',
-    locals: { steps: [link_to('Démarches', admin_procedures_path),
-                      link_to(@procedure.libelle, admin_procedure_path(@procedure)),
-                      'Instructeurs'] }
+    locals: { steps: [[t('.procedures'), admin_procedures_path],
+                      [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
+                      ['Instructeurs']] }

 .container.groupe-instructeur
  %h1 Gérer les instructeurs et les options d'instruction de « #{@procedure.libelle} »
--- a/app/views/administrateurs/groupe_instructeurs/reaffecter_dossiers.html.haml
+++ b/app/views/administrateurs/groupe_instructeurs/reaffecter_dossiers.html.haml
@ -1,8 +1,8 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
-                    link_to('Groupes d’instructeurs', admin_procedure_groupe_instructeurs_path(@procedure)),
-                    @groupe_instructeur.label] }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
+                    ['Groupes d’instructeurs', admin_procedure_groupe_instructeurs_path(@procedure)],
+                    [@groupe_instructeur.label]] }

 .container.groupe-instructeur

--- a/app/views/administrateurs/groupe_instructeurs/show.html.haml
+++ b/app/views/administrateurs/groupe_instructeurs/show.html.haml
@ -1,8 +1,8 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
-                    link_to('Groupes d’instructeurs', admin_procedure_groupe_instructeurs_path(@procedure)),
-                    @groupe_instructeur.label] }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
+                    ['Groupes d’instructeurs', admin_procedure_groupe_instructeurs_path(@procedure)],
+                    [@groupe_instructeur.label]] }

 .container.groupe-instructeur
  = render partial: 'administrateurs/groups_header'
--- a/app/views/administrateurs/jeton_particulier/api_particulier.html.haml
+++ b/app/views/administrateurs/jeton_particulier/api_particulier.html.haml
@ -1,7 +1,7 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
-                    Procedure.human_attribute_name(:jeton_api_particulier)] }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
+                    [Procedure.human_attribute_name(:jeton_api_particulier)]] }

 .container
  .flex
--- a/app/views/administrateurs/jeton_particulier/show.html.haml
+++ b/app/views/administrateurs/jeton_particulier/show.html.haml
@ -1,8 +1,8 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
-                    link_to(Procedure.human_attribute_name(:jeton_api_particulier), admin_procedure_api_particulier_path(@procedure)),
-                    'Jeton'] }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
+                    [Procedure.human_attribute_name(:jeton_api_particulier), admin_procedure_api_particulier_path(@procedure)],
+                    ['Jeton']] }

 .container
  %h1.page-title
--- a/app/views/administrateurs/mail_templates/edit.html.haml
+++ b/app/views/administrateurs/mail_templates/edit.html.haml
@ -3,10 +3,10 @@
  = render partial: 'admin/closed_mail_template_attestation_inconsistency_alert'

 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
-                    link_to("Emails", admin_procedure_mail_templates_path(@procedure)),
-                    @mail_template.class.const_get(:DISPLAYED_NAME)] }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
+                    ["Emails", admin_procedure_mail_templates_path(@procedure)],
+                    [@mail_template.class.const_get(:DISPLAYED_NAME)]] }

 .procedure-form
  .procedure-form__columns.container
--- a/app/views/administrateurs/mail_templates/index.html.haml
+++ b/app/views/administrateurs/mail_templates/index.html.haml
@ -1,6 +1,7 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    link_to("#{@procedure.libelle}", admin_procedure_path(@procedure)), "Configuration des emails"] }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    ["#{@procedure.libelle.truncate_words(4)}", admin_procedure_path(@procedure)],
+                    ["Configuration des emails"]] }

 .container
  - @mail_templates.each do |mail_template|
--- a/app/views/administrateurs/procedure_administrateurs/index.html.haml
+++ b/app/views/administrateurs/procedure_administrateurs/index.html.haml
@ -1,7 +1,7 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
-                    'Administrateurs'], preview: false }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
+                    ['Administrateurs']], preview: false }

 .container
  %h1 Gérer les administrateurs de « #{@procedure.libelle} »
--- a/app/views/administrateurs/procedures/annotations.html.haml
+++ b/app/views/administrateurs/procedures/annotations.html.haml
@ -1,7 +1,7 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
-                    'Configuration des annotations privées'], preview: true }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
+                    ['Configuration des annotations privées']], preview: true }

 .container
  %h1 Configuration des annotations privées
--- a/app/views/administrateurs/procedures/champs.html.haml
+++ b/app/views/administrateurs/procedures/champs.html.haml
@ -1,7 +1,7 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    link_to(@procedure.libelle.truncate_words(10), admin_procedure_path(@procedure)),
-                    'Configuration des champs'], preview: @procedure.draft_revision.valid? }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
+                    ['Configuration des champs']], preview: @procedure.draft_revision.valid? }

 .container
  %h1 Configuration des champs
--- a/app/views/administrateurs/procedures/close.html.haml
+++ b/app/views/administrateurs/procedures/close.html.haml
@ -1,7 +1,7 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    "#{@procedure.libelle}", 'archiver'],
-            metadatas: ["Créée le #{@procedure.created_at.strftime('%d/%m/%Y')} - n° #{@procedure.id}", "#{@procedure.close? ? "Close le #{@procedure.closed_at.strftime('%d/%m/%Y')}" : @procedure.locked? ? "Publiée - #{procedure_lien(@procedure)}" : "Brouillon"}"] }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    ["#{@procedure.libelle.truncate_words(4)} - archiver"]],
+            metadatas: true }

 .container
  .card
--- a/app/views/administrateurs/procedures/edit.html.haml
+++ b/app/views/administrateurs/procedures/edit.html.haml
@ -1,9 +1,9 @@
 - content_for(:root_class, 'scroll-margins-for-sticky-footer')

 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
-                    'Description'] }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
+                    ['Description']] }
 .procedure-form
  .procedure-form__columns.container
    = form_for @procedure,
--- a/app/views/administrateurs/procedures/jeton.html.haml
+++ b/app/views/administrateurs/procedures/jeton.html.haml
@ -1,7 +1,7 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
-                    'Jeton'] }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
+                    ['Jeton']] }

 .container
  %h1.page-title
--- a/app/views/administrateurs/procedures/modifications.html.haml
+++ b/app/views/administrateurs/procedures/modifications.html.haml
@ -1,7 +1,7 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
-                    'Modifications'] }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
+                    ['Modifications']] }
 .container
  %h1.page-title
    Historique des modifications du formulaire
--- a/app/views/administrateurs/procedures/monavis.html.haml
+++ b/app/views/administrateurs/procedures/monavis.html.haml
@ -1,7 +1,7 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
-                    'MonAvis'] }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
+                    ['MonAvis']] }

 .container
  %h1.page-title
--- a/app/views/administrateurs/procedures/new.html.haml
+++ b/app/views/administrateurs/procedures/new.html.haml
@ -1,7 +1,7 @@
 - content_for(:root_class, 'scroll-margins-for-sticky-footer')

 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
+  locals: { steps: [['Démarches', admin_procedures_path],
                    'Nouvelle'] }

 .procedure-form
--- a/app/views/administrateurs/procedures/publication.html.haml
+++ b/app/views/administrateurs/procedures/publication.html.haml
@ -1,8 +1,8 @@

 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
-                    'Publication'] }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
+                    ['Publication']] }
 .container
  - if @procedure.draft_types_de_champ.dubious.present?
    .card.warning.mb-3
--- a/app/views/administrateurs/procedures/show.html.haml
+++ b/app/views/administrateurs/procedures/show.html.haml
@ -1,7 +1,7 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    "#{@procedure.libelle}", ],
-            metadatas: ["Créée le #{@procedure.created_at.strftime('%d/%m/%Y')} - n° #{@procedure.id}", "#{@procedure.close? ? "Close le #{@procedure.closed_at.strftime('%d/%m/%Y')}" : @procedure.locked? ? "Publiée - #{procedure_lien(@procedure)}" : "Brouillon"}"] }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    ["#{@procedure.libelle.truncate_words(4)}"]],
+            metadatas: true }

 .container.procedure-admin-container
  - if @procedure.draft_revision.valid?
--- a/app/views/administrateurs/procedures/transfert.html.haml
+++ b/app/views/administrateurs/procedures/transfert.html.haml
@ -1,6 +1,6 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
-                    'Transfert'] }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
+                    ['Transfert']] }
 .container
  = render partial: 'procedure_transfert'
--- a/app/views/administrateurs/services/edit.html.haml
+++ b/app/views/administrateurs/services/edit.html.haml
@ -1,8 +1,8 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    link_to(@procedure.libelle.truncate_words(10), admin_procedure_path(@procedure)),
-                    link_to('Choix du service', admin_services_path(procedure_id: @procedure.id)),
-                    'Modifier le service'] }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
+                    ['Choix du service', admin_services_path(procedure_id: @procedure.id)],
+                    ['Modifier le service']] }


 .container
--- a/app/views/administrateurs/services/index.html.haml
+++ b/app/views/administrateurs/services/index.html.haml
@ -1,7 +1,7 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    link_to(@procedure.libelle.truncate_words(10), admin_procedure_path(@procedure)),
-                    'Choix du service'] }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
+                    ['Choix du service']] }

 #services-index.container
  %h1.fr-h1 Liste des Services
--- a/app/views/administrateurs/services/new.html.haml
+++ b/app/views/administrateurs/services/new.html.haml
@ -1,8 +1,8 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    link_to(@procedure.libelle.truncate_words(10), admin_procedure_path(@procedure)),
-                    link_to('Choix du service', admin_services_path(procedure_id: @procedure.id)),
-                    'Nouveau service'] }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
+                    ['Choix du service', admin_services_path(procedure_id: @procedure.id)],
+                    ['Nouveau service']] }

 .container
  %h1 Nouveau Service
--- a/app/views/administrateurs/sources_particulier/show.html.haml
+++ b/app/views/administrateurs/sources_particulier/show.html.haml
@ -1,8 +1,8 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
-                    link_to(Procedure.human_attribute_name(:jeton_api_particulier), admin_procedure_api_particulier_path(@procedure)),
-                    t('.data_sources')] }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
+                    [Procedure.human_attribute_name(:jeton_api_particulier), admin_procedure_api_particulier_path(@procedure)],
+                    [t('.data_sources')]] }

 .container
  %h1.page-title= t('.title')
--- a/app/views/instructeurs/archives/index.html.haml
+++ b/app/views/instructeurs/archives/index.html.haml
@ -1,8 +1,8 @@
 - content_for(:title, "Archives pour #{@procedure.libelle}")

 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to(@procedure.libelle, instructeur_procedure_path(@procedure)),
-                    'Archives'] }
+  locals: { steps: [[@procedure.libelle.truncate_words(4), instructeur_procedure_path(@procedure)],
+                    ['Archives']] }

 .container
  %h1.mb-2 Archives
--- a/app/views/instructeurs/groupe_instructeurs/index.html.haml
+++ b/app/views/instructeurs/groupe_instructeurs/index.html.haml
@ -1,8 +1,8 @@
 - content_for(:title, "Notifications pour #{@procedure.libelle}")

 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to(@procedure.libelle, instructeur_procedure_path(@procedure)),
-                    'Groupes d’instructeurs'] }
+  locals: { steps: [[@procedure.libelle.truncate_words(4), instructeur_procedure_path(@procedure)],
+                    ['Groupes d’instructeurs']] }

 .container.groupe-instructeur
  .card
--- a/app/views/instructeurs/groupe_instructeurs/show.html.haml
+++ b/app/views/instructeurs/groupe_instructeurs/show.html.haml
@ -2,9 +2,9 @@
  - content_for(:title, "Instructeurs du groupe #{@groupe_instructeur.label}")

  = render partial: 'administrateurs/breadcrumbs',
-    locals: { steps: [link_to(@procedure.libelle, instructeur_procedure_path(@procedure)),
-                      link_to('Groupes d’instructeurs', instructeur_groupes_path(@procedure)),
-                      @groupe_instructeur.label] }
+    locals: { steps: [[@procedure.libelle.truncate_words(4), instructeur_procedure_path(@procedure)],
+                      ['Groupes d’instructeurs', instructeur_groupes_path(@procedure)],
+                      [@groupe_instructeur.label]] }

 - else
  - content_for(:title, "Instructeurs de la démarche #{@procedure.libelle}")
--- a/app/views/instructeurs/procedures/email_notifications.html.haml
+++ b/app/views/instructeurs/procedures/email_notifications.html.haml
@ -1,8 +1,8 @@
 - content_for(:title, "Notifications pour #{@procedure.libelle}")

 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to(@procedure.libelle, instructeur_procedure_path(@procedure)),
-                    'Notifications'] }
+  locals: { steps: [[@procedure.libelle.truncate_words(4), instructeur_procedure_path(@procedure)],
+                    ['Notifications']] }

 .container
  %h1
--- a/app/views/instructeurs/procedures/email_usagers.html.haml
+++ b/app/views/instructeurs/procedures/email_usagers.html.haml
@ -1,8 +1,8 @@
 - content_for(:title, "Contacter les usagers pour #{@procedure.libelle}")

 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to(@procedure.libelle, instructeur_procedure_path(@procedure)),
-                    t('.contact_users')] }
+  locals: { steps: [[@procedure.libelle.truncate_words(4), instructeur_procedure_path(@procedure)],
+                    [t('.contact_users')]] }
 .messagerie.container
  - if @email_usagers_dossiers.present?
    %p.notice.mb-2.mt-4
--- a/app/views/instructeurs/procedures/stats.html.haml
+++ b/app/views/instructeurs/procedures/stats.html.haml
@ -2,7 +2,7 @@
 - content_for(:title, title)

 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to(@procedure.libelle, instructeur_procedure_path(@procedure)),
-                    t('.title')] }
+  locals: { steps: [[@procedure.libelle.truncate_words(4), instructeur_procedure_path(@procedure)],
+                    [t('.title')]] }

 = render partial: 'shared/procedures/stats', locals: { title: title }
--- a/app/views/layouts/_account_dropdown.haml
+++ b/app/views/layouts/_account_dropdown.haml
@ -1,23 +1,39 @@
-.dropdown.header-menu-opener{ data: { controller: 'menu-button' } }
-  %button.button.dropdown-button.icon-only.header-menu-button{ title: "Mon compte", data: { menu_button_target: 'button' } }
-    %span.hidden= t("my_account", scope: [:layouts])
-    = image_tag "icons/account-circle.svg", alt: 'Mon compte', width: 24, height: 24, loading: 'lazy'
-  %ul.header-menu.dropdown-content#mon_compte_menu{ data: { menu_button_target: 'menu' } }
-    %li
-      .menu-item{ title: current_email }
-        = current_email
-    - if super_admin_signed_in?
-      %li
-        = link_to manager_root_path, class: "menu-item menu-link" do
-          = image_tag "icons/super-admin.svg", alt: ''
-          = t('go_superadmin', scope: [:layouts])
-    - if multiple_devise_profile_connect?
-      - if user_signed_in? && nav_bar_profile != :user
-        %li
-          = link_to dossiers_path, class: "menu-item menu-link" do
-            = image_tag "icons/switch-profile.svg", alt: ''
-            = t('go_user', scope: [:layouts])
-      - if instructeur_signed_in? && nav_bar_profile != :instructeur
+
+%nav.fr-nav{ role: "navigation", "aria-label"=> t('menu_aria_label', scope: [:layouts]) }
+  .fr-nav__item
+    %button.fr-translate__btn.fr-btn{ "aria-controls" => "account", "aria-expanded" => "false", :title => t('my_account', scope: [:layouts]) }
+      = image_tag "icons/account-circle.svg", alt: t('my_account', scope: [:layouts]), width: 20, height: 20, loading: 'lazy'
+      &nbsp;
+      = " #{current_email}"
+    #account.fr-collapse.fr-menu
+      %ul.fr-menu__list
+        - if super_admin_signed_in?
+          %li
+            = link_to manager_root_path, class: "fr-nav__link flex align-center" do
+              = image_tag "icons/super-admin.svg", alt: '',width: 20, height: 20, class: 'mr-1'
+              = t('go_superadmin', scope: [:layouts])
+        - if multiple_devise_profile_connect?
+          - if user_signed_in? && nav_bar_profile != :user
+            %li
+              = link_to dossiers_path, class: "fr-nav__link flex align-center" do
+                = image_tag "icons/switch-profile.svg", alt: '', width: 20, height: 20, class: 'mr-1'
+                = t('go_user', scope: [:layouts])
+          - if instructeur_signed_in? && nav_bar_profile != :instructeur
+            %li
+              = link_to instructeur_procedures_path, class: "fr-nav__link flex align-center" do
+                = image_tag "icons/switch-profile.svg", alt: '', width: 20, height: 20, class: 'mr-1'
+                = t('go_instructor', scope: [:layouts])
+          - if expert_signed_in? && nav_bar_profile != :expert
+            %li
+              = link_to expert_all_avis_path, class: "fr-nav__link flex align-center" do
+                = image_tag "icons/switch-profile.svg", alt: ''
+                = t('go_expert', scope: [:layouts])
+          - if administrateur_signed_in? && nav_bar_profile != :administrateur
+            %li
+              = link_to admin_procedures_path, class: "fr-nav__link flex align-center" do
+                = image_tag "icons/switch-profile.svg", alt: '', width: 20, height: 20, class: 'mr-1'
+                = t('go_admin', scope: [:layouts])
+
        %li
          = link_to instructeur_procedures_path, class: "menu-item menu-link" do
            = image_tag "icons/switch-profile.svg", alt: ''
--- a/app/views/users/profil/show.html.haml
+++ b/app/views/users/profil/show.html.haml
@ -1,6 +1,6 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Tableau de bord', tableau_de_bord_helper_path),
-                    'Profil'] }
+  locals: { steps: [['Tableau de bord', tableau_de_bord_helper_path],
+                    ['Profil']] }

 #profil-page.container
  %h1 Profil
--- a/config/locales/views/layouts/_breadcrumb.en.yml
+++ b/config/locales/views/layouts/_breadcrumb.en.yml
@ -0,0 +1,13 @@
+en:
+  layouts:
+    breadcrumb:
+      root: "Home"
+      you_are_here: "You are here"
+      show: Show breadcrumb
+      preview: "Preview the form"
+      continue: "Continue >"
+      continue_title: "You can comeback using this link"
+      created_at: "Created at %{date} - n° %{number}"
+      closed_at: "Closed at %{date}"
+      published: "Published"
+      draft: "Draft"
--- a/config/locales/views/layouts/_breadcrumb.fr.yml
+++ b/config/locales/views/layouts/_breadcrumb.fr.yml
@ -0,0 +1,13 @@
+fr:
+  layouts:
+    breadcrumb:
+      root: "Accueil"
+      you_are_here: "Vous êtes ici"
+      show: "Voir le fil d’Ariane"
+      preview: "Prévisualiser le formulaire"
+      continue: "Continuer >"
+      continue_title: "Vous pourrez revenir ici par la suite"
+      created_at: "Créée le %{date} - n° %{number}"
+      closed_at: "Close le %{date}"
+      published: "Publiée – "
+      draft: "Brouillon"
--- a/spec/system/administrateurs/procedure_update_spec.rb
+++ b/spec/system/administrateurs/procedure_update_spec.rb
@ -38,7 +38,7 @@ describe 'Administrateurs can edit procedures', js: true do

      click_on 'Enregistrer'

-      expect(page).to have_selector('.breadcrumbs li', text: 'Ma petite démarche')
+      expect(page).to have_selector('.fr-breadcrumb li', text: 'Ma petite démarche')
    end
  end

@ -55,7 +55,7 @@ describe 'Administrateurs can edit procedures', js: true do

      click_on 'Enregistrer'

-      expect(page).to have_selector('.breadcrumbs li', text: 'Ma petite démarche')
+      expect(page).to have_selector('.fr-breadcrumb li', text: 'Ma petite démarche')
    end
  end
 end