update header menus to mimic v1

assets/css/global.scss

@@ -63,6 +63,10 @@ header .v-toolbar__content {
       border-bottom: 1px solid;
       border-bottom-color: rgb(var(--v-theme-neutral));
     }
+
+    .v-list-item.end-of-section {
+      border-bottom: 3px solid rgb(var(--v-theme-neutral));
+    }
   }
 }
 

components/Layout/Header/Menu.vue

@@ -41,6 +41,7 @@ header principal (configuration, paramètres du compte...)
                 :id="child.label"
                 :href="!isInternalLink(child) ? child.to : undefined"
                 :to="isInternalLink(child) ? child.to : undefined"
+                :class="{ 'end-of-section': 'endOfSubsection' in child && child.endOfSubsection }"
               >
                 <span v-if="child.icon" class="pr-2 d-flex align-center">
                   <v-avatar

components/Layout/Parameters/Menu.vue

@@ -32,6 +32,7 @@
         :to="(item as MenuItem).to"
         @click="onItemClicked"
       />
+
     </v-list>
   </v-navigation-drawer>
 </template>

i18n/lang/fr.json

@@ -11,7 +11,7 @@
   "opentalent_options": "Les options Opentalent",
   "opentalent_offers": "Les offres Opentalent",
   "service_detail": "Détail des services",
-  "my_settings_page": "Mes paramètres",
+  "my_settings_page": "Mes préférences",
   "allow_report_message": "Je souhaite recevoir les rapports d'envoi des emails que j'envoie",
   "my-settings_breadcrumbs": "Mes paramètres",
   "message_settings": "Paramètres des messages",

services/layout/menuBuilder/abstractMenuBuilder.ts

@@ -86,6 +86,7 @@ abstract class AbstractMenuBuilder implements MenuBuilder {
    * @param to
    * @param type
    * @param newTab
+   * @param endOfSubsection
    * @return {MenuItem}
    */
   protected createItem(
@@ -94,6 +95,7 @@ abstract class AbstractMenuBuilder implements MenuBuilder {
     to: string = '',
     type: MENU_LINK_TYPE = MENU_LINK_TYPE.INTERNAL,
     newTab: boolean = false,
+    endOfSubsection: boolean = false,
   ): MenuItem {
     let url: string
     if (type === MENU_LINK_TYPE.INTERNAL) {
@@ -122,6 +124,7 @@ abstract class AbstractMenuBuilder implements MenuBuilder {
       type,
       active: false,
       target: newTab ? LINK_TARGET.BLANK : LINK_TARGET.SELF,
+      endOfSubsection,
     }
   }
 
@@ -143,12 +146,12 @@ abstract class AbstractMenuBuilder implements MenuBuilder {
    * @protected
    */
   protected makeChildren(
-    items: Array<{ pageName: string; icon?: string }>,
+    items: Array<{ pageName: string; icon?: string; endOfSubsection?: boolean }>,
   ): MenuItems {
     const children: MenuItems = []
 
     items.forEach((item) => {
-      const { pageName, icon } = item
+      const { pageName, icon, endOfSubsection = false } = item
 
       if (this.ability.can('display', pageName)) {
         const to = this.router.resolve({ name: pageName })
@@ -161,6 +164,7 @@ abstract class AbstractMenuBuilder implements MenuBuilder {
           to: to.href,
           type: MENU_LINK_TYPE.INTERNAL,
           active: false,
+          endOfSubsection,
         })
       }
     })

services/layout/menuBuilder/accountMenuBuilder.ts

@@ -132,11 +132,13 @@ export default class AccountMenuBuilder extends AbstractMenuBuilder {
           undefined,
           `/adherent_contacts/list/`,
           MENU_LINK_TYPE.V1,
+          false,
+          true,
         ),
       )
     }
 
-    children.push(...this.makeChildren([{ pageName: 'subscription_page' }]))
+    children.push(...this.makeChildren([{ pageName: 'subscription_page', endOfSubsection: true }]))
 
     if (this.ability.can('display', 'my_bills_page')) {
       children.push(
@@ -160,7 +162,7 @@ export default class AccountMenuBuilder extends AbstractMenuBuilder {
       )
     }
 
-    children.push(...this.makeChildren([{ pageName: 'my_settings_page' }]))
+    children.push(...this.makeChildren([{ pageName: 'my_settings_page', endOfSubsection: true }]))
 
     actions.push(
       this.createItem('logout', undefined, `/logout`, MENU_LINK_TYPE.V1),

services/layout/menuBuilder/configurationMenuBuilder.ts

@@ -15,6 +15,7 @@ export default class ConfigurationMenuBuilder extends AbstractMenuBuilder {
   build(): MenuItem | MenuGroup | null {
     const children: MenuItems = []
 
+    // 1. "Fiche de la structure" -> 'organization_page'
     if (this.ability.can('display', 'organization_page')) {
       children.push(
         this.createItem(
@@ -30,91 +31,75 @@ export default class ConfigurationMenuBuilder extends AbstractMenuBuilder {
       )
     }
 
-    // if (this.ability.can('display', 'cmf_licence_page')) {
-    //   children.push(
-    //     this.createItem(
-    //       'cmf_licence_generate',
-    //       undefined,
-    //       '/cmf_licence_structure',
-    //       MENU_LINK_TYPE.INTERNAL,
-    //     ),
-    //   )
-    // }
+    // 2. "Préférences" -> 'parameters_page'
+    children.push(...this.makeChildren([{ pageName: 'parameters_page', endOfSubsection: true }]))
 
-    if (this.ability.can('display', 'cmf_licence_page')) {
+    // 3. "Enseignements" -> 'education'
+    if (this.ability.can('display', 'education_page')) {
       children.push(
         this.createItem(
-          'cmf_licence_generate',
+          'education',
           undefined,
-          '/licence_cmf/organization',
+          '/educations/list/',
           MENU_LINK_TYPE.V1,
         ),
       )
     }
 
-    // if (this.ability.can('display', 'parameters_page')) {
-    //   children.push(
-    //     this.createItem(
-    //       'parameters',
-    //       undefined,
-    //       `/parameters`,
-    //       MENU_LINK_TYPE.INTERNAL,
-    //     ),
-    //   )
-    // }
-
-    children.push(...this.makeChildren([{ pageName: 'parameters_page' }]))
-
-    if (this.ability.can('display', 'place_page')) {
+    // 4. "Parcours" -> 'parcours'
+    if (this.ability.can('display', 'parcours_page')) {
       children.push(
         this.createItem(
-          'places',
+          'parcours',
           undefined,
-          '/places/list/',
+          '/family_quotient_models/list/',
           MENU_LINK_TYPE.V1,
         ),
       )
     }
 
-    if (this.ability.can('display', 'education_page')) {
+    // 5. "Sections" -> 'activities'
+    if (this.ability.can('display', 'activities_page')) {
       children.push(
         this.createItem(
-          'education',
+          'activities',
           undefined,
-          '/educations/list/',
+          '/activities/list/',
           MENU_LINK_TYPE.V1,
         ),
       )
     }
 
-    if (this.ability.can('display', 'tag_page')) {
-      children.push(
-        this.createItem('tags', undefined, '/taggs/list/', MENU_LINK_TYPE.V1),
-      )
-    }
-
-    if (this.ability.can('display', 'activities_page')) {
+    // 6. "Préinscription(s) en ligne" -> 'online_registration_settings'
+    if (this.ability.can('display', 'online_registration_settings_page')) {
       children.push(
         this.createItem(
-          'activities',
+          'online_registration_settings',
           undefined,
-          '/activities/list/',
+          UrlUtils.join(
+            '/main/edit/online_registration_settings/',
+            this.organizationProfile.id ?? '',
+          ),
           MENU_LINK_TYPE.V1,
         ),
       )
     }
 
-    if (this.ability.can('display', 'template_systems_page')) {
+    // 7. "Dupliquer les cours hebdomadaires" -> 'course_duplication'
+    if (this.ability.can('display', 'course_duplication_page')) {
       children.push(
         this.createItem(
-          'template_systems',
+          'course_duplication',
           undefined,
-          '/template_systems/list/',
+          '/duplicate_courses',
           MENU_LINK_TYPE.V1,
+          false,
+          true,
         ),
       )
     }
 
+    // 8. "Facturation" -> 'billing_settings'
     if (this.ability.can('display', 'billing_settings_page')) {
       children.push(
         this.createItem(
@@ -129,76 +114,101 @@ export default class ConfigurationMenuBuilder extends AbstractMenuBuilder {
       )
     }
 
-    if (this.ability.can('display', 'online_registration_settings_page')) {
+    // 9. "Liste des produits" -> 'billing_product'
+    if (this.ability.can('display', 'billing_product_page')) {
       children.push(
         this.createItem(
-          'online_registration_settings',
+          'billing_product',
           undefined,
-          UrlUtils.join(
-            '/main/edit/online_registration_settings/',
-            this.organizationProfile.id ?? '',
-          ),
+          '/intangibles/list/',
           MENU_LINK_TYPE.V1,
         ),
       )
     }
 
-    if (this.ability.can('display', 'course_duplication_page')) {
+    // 10. "Modèles de quotients familiaux" -> 'family_quotient_models'
+    if (this.ability.can('display', 'family_quotient_models_page')) {
       children.push(
         this.createItem(
-          'course_duplication',
+          'family_quotient_models',
           undefined,
-          '/duplicate_courses',
+          '/family_quotient_models/list/',
           MENU_LINK_TYPE.V1,
         ),
       )
     }
 
-    if (this.ability.can('display', 'import_page')) {
+    // 11. "Echéanciers de facturation" -> 'billing_schedules'
+    if (this.ability.can('display', 'billing_schedules_settings_page')) {
       children.push(
-        this.createItem('import', undefined, '/import/all', MENU_LINK_TYPE.V1),
+        this.createItem(
+          'billing_schedules',
+          undefined,
+          '/bill_schedules/list/',
+          MENU_LINK_TYPE.V1,
+          false,
+          true,
+        ),
       )
     }
 
-    if (this.ability.can('display', 'parcours_page')) {
+    // 12. "Lieux" -> 'places'
+    if (this.ability.can('display', 'place_page')) {
       children.push(
         this.createItem(
-          'parcours',
+          'places',
           undefined,
-          '/family_quotient_models/list/',
+          '/places/list/',
           MENU_LINK_TYPE.V1,
         ),
       )
     }
 
-    if (this.ability.can('display', 'family_quotient_models_page')) {
+    // 13. "Mails système" -> 'template_systems'
+    if (this.ability.can('display', 'template_systems_page')) {
       children.push(
         this.createItem(
-          'family_quotient_models',
+          'template_systems',
           undefined,
-          '/family_quotient_models/list/',
+          '/template_systems/list/',
           MENU_LINK_TYPE.V1,
         ),
       )
     }
 
-    if (this.ability.can('display', 'billing_schedules_settings_page')) {
+    // 14. "Pseudonymisation" -> 'pseudonymization'
+    if (this.ability.can('display', 'pseudonymization_page')) {
       children.push(
         this.createItem(
-          'billing_schedules',
+          'pseudonymization',
           undefined,
-          '/bill_schedules/list/',
+          '/pseudonymizationList/list/',
           MENU_LINK_TYPE.V1,
         ),
       )
     }
 
-    if (this.ability.can('display', 'pseudonymization_page')) {
+    // 15. "Tags" -> 'tags'
+    if (this.ability.can('display', 'tag_page')) {
+      children.push(
+        this.createItem('tags', undefined, '/taggs/list/', MENU_LINK_TYPE.V1),
+      )
+    }
+
+    // 16. "Importer" -> 'import'
+    if (this.ability.can('display', 'import_page')) {
+      children.push(
+        this.createItem('import', undefined, '/import/all', MENU_LINK_TYPE.V1),
+      )
+    }
+
+    // CMF licence (not in the required order, but keeping it at the end)
+    if (this.ability.can('display', 'cmf_licence_page')) {
       children.push(
         this.createItem(
-          'pseudonymization',
+          'cmf_licence_generate',
           undefined,
-          '/pseudonymizationList/list/',
+          '/licence_cmf/organization',
           MENU_LINK_TYPE.V1,
         ),
       )

types/layout.d.ts

@@ -21,6 +21,8 @@ interface MenuItem {
   active: boolean
   /** Définit l'attribut 'target' du lien */
   target?: LINK_TARGET
+  /** Indique si l'item est à la fin d'une sous-section (bordure basse plus épaisse) */
+  endOfSubsection?: boolean
 }
 
 /**