Merge pull request #9313 from demarches-simplifiees/fix-dropdown-navbar-profile

[fix] le dropdown pour les utilisateurs connectés

app/assets/stylesheets/dsfr.scss

@@ -84,6 +84,11 @@ fieldset {
   display: none;
 }
 
+// on souhaite que le dropdown s'adapate correctement en largeur
+.fr-translate .fr-menu__list.max-content {
+  width: max-content;
+}
+
 // on veut ferrer à droite le dropdown de sélecteur de langue
 @media (min-width: 62em) {
   .fr-nav__item.custom-fr-translate-flex-end {

app/controllers/administrateurs/administrateur_controller.rb

@@ -3,6 +3,10 @@ module Administrateurs
     before_action :authenticate_administrateur!
     helper_method :administrateur_as_manager?
 
+    def nav_bar_profile
+      :administrateur
+    end
+
     def retrieve_procedure
       id = params[:procedure_id] || params[:id]
 

app/views/layouts/_account_dropdown.haml

@@ -1,43 +1,47 @@
 %nav.fr-translate.fr-nav{ role: "navigation", "aria-label"=> t('menu_aria_label', scope: [:layouts]) }
   .fr-nav__item
     %button.account-btn.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'
        
       = " #{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])
+      %ul.fr-menu__list.max-content
         - if multiple_devise_profile_connect?
+          %li
+            = link_to "#", class: "fr-nav__link", "aria-current" => "true" do
+              = t('layouts.connected_as', profile: t("layouts.#{nav_bar_profile}"))
+
           - 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'
+              = link_to dossiers_path, class: "fr-nav__link" do
+                %span.fr-icon-refresh-line.fr-icon--sm
                 = 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'
+              = link_to instructeur_procedures_path, class: "fr-nav__link" do
+                %span.fr-icon-refresh-line.fr-icon--sm
                 = 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: '', width: 20, height: 20, class: 'mr-1'
+              = link_to expert_all_avis_path, class: "fr-nav__link" do
+                %span.fr-icon-refresh-line.fr-icon--sm
                 = 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'
+              = link_to admin_procedures_path, class: "fr-nav__link" do
+                %span.fr-icon-refresh-line.fr-icon--sm
                 = t('go_admin', scope: [:layouts])
 
+        - if super_admin_signed_in?
+          %li
+            = link_to manager_root_path, class: "fr-nav__link" do
+              %span.fr-icon-shield-line.fr-icon--sm
+              = t('go_superadmin', scope: [:layouts])
+
         %li
-          = link_to profil_path, class: "fr-nav__link flex align-center" do
-            = image_tag "icons/switch-profile.svg", alt: '', width: 20, height: 20, class: 'mr-1'
+          = link_to profil_path, class: "fr-nav__link" do
+            %span.fr-icon-user-line.fr-icon--sm
             = t('profile', scope: [:layouts])
         %li
-          = link_to destroy_user_session_path, method: :delete, class: "fr-nav__link flex align-center" do
-            = image_tag "icons/sign-out.svg", alt: '', width: 20, height: 20, class: 'mr-1'
+          = link_to destroy_user_session_path, method: :delete, class: "fr-nav__link" do
+            %span.fr-icon-logout-box-r-line.fr-icon--sm
             = t('logout', scope: [:layouts])

config/locales/views/layouts/_account_dropdown.en.yml

@@ -11,3 +11,8 @@ en:
     profile: "See my profile"
     logout: "Log out"
     my_account: "My account"
+    connected_as: "connected as %{profile}"
+    instructeur: instructor
+    administrateur: admin
+    expert: expert
+    user: user

config/locales/views/layouts/_account_dropdown.fr.yml

@@ -11,3 +11,8 @@ fr:
     profile: "Voir mon profil"
     logout: "Se déconnecter"
     my_account: "Mon compte"
+    connected_as: "connecté en tant qu’%{profile}"
+    instructeur: instructeur
+    administrateur: administrateur
+    expert: expert
+    user: usager