Change help menu design pattern (user pages)

app/assets/stylesheets/buttons.scss

@@ -243,6 +243,44 @@ ul.dropdown-items {
   margin-bottom: 0;
 }
 
+// Apply custom styles to DSFR fr-translate component
+.fr-translate__btn.fr-btn.help-btn::before {
+  content: none;
+}
+
+.help__content.fr-menu ul.fr-menu__list {
+  text-align: left;
+  font-size: 1rem;
+
+  @media (min-width: 62em) {
+    font-size: 0.875rem;
+    padding: 0;
+    width: 360px;
+  }
+}
+
+.help__content.fr-menu ul.fr-menu__list li {
+  padding: 0.75rem 1rem;
+
+  @media (min-width: 62em) {
+    padding-right: 1rem;
+    padding-left: 1rem;
+  }
+}
+
+.help__content.fr-menu ul.fr-menu__list li:not(:last-child) {
+  @media (min-width: 62em) {
+    border-bottom: 1px solid $border-grey;
+  }
+}
+
+.help__content.fr-menu ul.fr-menu__list {
+  h1, p {
+    font-size: inherit;
+    line-height: inherit;
+  }
+}
+
 .dropdown-items {
   li {
     display: flex;

app/views/shared/help/_help_dropdown_dossier.html.haml

@@ -1,17 +1,20 @@
-= render Dropdown::MenuComponent.new(wrapper: :span, wrapper_options: { class: ['help-dropdown']}, menu_options: { id: "help-menu" }) do |menu|
+.fr-translate.fr-nav
-  - menu.with_button_inner_html do
+  .fr-nav__item
-    = t('help')
+    %button.help-btn.fr-translate__btn.fr-btn{ "aria-controls" => "help-menu", "aria-expanded" => "false" }
+      = t('help')
 
-  - title = dossier.brouillon? ? t("help_dropdown.help_brouillon_title") : t("help_dropdown.help_filled_dossier")
+    #help-menu.help__content.fr-collapse.fr-menu
+      - title = dossier.brouillon? ? t("help_dropdown.help_brouillon_title") : t("help_dropdown.help_filled_dossier")
+      %ul.fr-menu__list
 
-  - if dossier.messagerie_available?
+        - if dossier.messagerie_available?
-    - menu.with_item do
+          %li.flex
-      = render partial: 'shared/help/dropdown_items/messagerie_item', locals: { dossier: dossier, title: title }
+            = render partial: 'shared/help/dropdown_items/messagerie_item', locals: { dossier: dossier, title: title }
 
-  - elsif dossier.procedure.service.present?
+        - elsif dossier.procedure.service.present?
-    - menu.with_item do
+          %li.flex
-      = render partial: 'shared/help/dropdown_items/service_item',
+            = render partial: 'shared/help/dropdown_items/service_item',
-        locals: { service: dossier.procedure.service, title: title }
+              locals: { service: dossier.procedure.service, title: title }
 
-  - menu.with_item do
+        %li
-    = render partial: 'shared/help/dropdown_items/faq_item'
+          = render partial: 'shared/help/dropdown_items/faq_item'

app/views/shared/help/dropdown_items/_faq_item.html.haml

@@ -1,5 +1,5 @@
-= link_to t("links.common.faq.url"), title: new_tab_suffix(t('help_dropdown.general_title')), **external_link_attributes, role: 'menuitem' do
+= link_to t("links.common.faq.url"), class: 'flex', title: new_tab_suffix(t('help_dropdown.general_title')), **external_link_attributes do
   %span.fr-icon-question-fill.fr-text-action-high--blue-france{ "aria-hidden": "true" }
   .fr-pl-1w
-    %h1.fr-text--sm= t('help_dropdown.problem_title')
+    %h1= t('help_dropdown.problem_title')
-    %p.fr-text--sm= t('help_dropdown.problem_description')
+    %p= t('help_dropdown.problem_description')

app/views/shared/help/dropdown_items/_messagerie_item.html.haml

@@ -1,5 +1,5 @@
-= link_to messagerie_dossier_path(dossier), role: 'menuitem' do
+= link_to messagerie_dossier_path(dossier), class: 'flex' do
   %span.fr-icon-mail-fill.fr-text-action-high--blue-france{ "aria-hidden": "true" }
   .fr-pl-1w
-    %h1.fr-text--sm= title
+    %h1= title
-    %p.fr-text--sm= t('help_dropdown.contact_instructeur')
+    %p= t('help_dropdown.contact_instructeur')

app/views/shared/help/dropdown_items/_service_item.html.haml

@@ -1,20 +1,20 @@
 %span.fr-icon-user-fill.fr-text-action-high--blue-france{ "aria-hidden": "true" }
 .fr-pl-1w
-  %h1.fr-text--sm= title
+  %h1= title
-  %p.fr-mt-2w.fr-mb-1w.fr-text--sm= t('help_dropdown.contact_administration')
+  %p.fr-mb-1w= t('help_dropdown.contact_administration')
-  %dl.fr-text--sm
+  %dl
-    .flex.fr-mb-1w
+    .flex.fr-mb-1v
       %dt.fr-mr-1v
         %span.fr-icon-mail-fill.fr-icon--sm{ "aria-hidden": "true" }
         %span.visually-hidden= t('layouts.mailers.service_footer.by_email')
       %dd
-        = link_to service.email, "mailto:#{service.email}", role: 'menuitem'
+        = link_to service.email, "mailto:#{service.email}"
-    .flex.fr-mb-1w
+    .flex.fr-mb-1v
       %dt.fr-mr-1v
         %span.fr-icon-phone-fill.fr-icon--sm{ "aria-hidden": "true" }
         %span.visually-hidden= t('layouts.mailers.service_footer.by_phone')
       %dd
-        = link_to service.telephone, service.telephone_url, role: 'menuitem'
+        = link_to service.telephone, service.telephone_url
     .flex
       %dt.fr-mr-1v
         %span.fr-icon-time-fill.fr-icon--sm{ "aria-hidden": "true" }