fix parameters menu layout and style

components/Layout/MainMenu.vue

@@ -123,8 +123,7 @@ onUnmounted(() => {
     min-height: 10px !important;
   }
 
-  :deep(.v-list-item-title),
-  :deep(.v-icon),
+  :deep(.v-list-item-title), :deep(.v-icon)
   {
     font-size: 14px;
     color: rgb(var(--v-theme-on-secondary));

components/Layout/Parameters/Menu.vue

@@ -1,44 +0,0 @@
-<template>
-  <v-navigation-drawer>
-    <template v-slot:prepend>
-      <div class="title">
-        <h3>{{ $t('parameters') }}</h3>
-      </div>
-    </template>
-    <v-list>
-      <v-list-item :title="$t('general_parameters')" to="/parameters/general_parameters"></v-list-item>
-      <v-list-item :title="$t('website')" to="/parameters/website"></v-list-item>
-      <v-list-item v-if="organizationProfile.isSchool" :title="$t('teaching')" to="/parameters/teaching"></v-list-item>
-      <v-list-item v-if="organizationProfile.isSchool" :title="$t('intranet_access')" to="/parameters/intranet"></v-list-item>
-      <v-list-item v-if="organizationProfile.isSchool" :title="$t('educationNotations')" to="/parameters/education_notation"></v-list-item>
-      <v-list-item v-if="organizationProfile.isSchool" :title="$t('bulletin')" to="/parameters/bulletin"></v-list-item>
-      <v-list-item v-if="organizationProfile.isSchool" :title="$t('educationTimings')" to="/parameters/education_timings"></v-list-item>
-      <v-list-item v-if="organizationProfile.isSchool" :title="$t('attendances')" to="/parameters/attendances"></v-list-item>
-      <v-list-item v-if="organizationProfile.isSchool" :title="$t('residenceAreas')" to="/parameters/residence_areas"></v-list-item>
-      <v-list-item v-if="organizationProfile.hasModule('Sms')" :title="$t('sms_option')" to="/parameters/sms"></v-list-item>
-      <v-list-item :title="$t('super_admin')" to="/parameters/super_admin"></v-list-item>
-    </v-list>
-  </v-navigation-drawer>
-</template>
-
-<script setup lang="ts">
-  import {useOrganizationProfileStore} from "~/stores/organizationProfile";
-
-  const organizationProfile = useOrganizationProfileStore()
-</script>
-
-<style scoped lang="scss">
-  .title {
-    display: flex;
-    align-items: center;
-    height: 48px;
-    vertical-align: center;
-    margin-top: 18px;
-    padding: 4px 16px;
-    font-size: 18px;
-  }
-
-  .v-navigation-drawer {
-    border-right: solid 1px rgb(var(--v-theme-neutral-strong));
-  }
-</style>

components/Layout/ParametersMenu.vue

@@ -0,0 +1,68 @@
+<template>
+  <v-navigation-drawer v-model="displayMenu">
+    <template v-slot:prepend>
+      <div class="title">
+        <h3>{{ $t('parameters') }}</h3>
+      </div>
+    </template>
+
+    <v-list active-class="active">
+      <v-list-item
+          v-for="(item, i) in menu.children"
+          :key="i"
+          :title="$t(item.label)"
+          :to="item.to">
+      </v-list-item>
+    </v-list>
+  </v-navigation-drawer>
+</template>
+
+<script setup lang="ts">
+  import {useMenu} from "~/composables/layout/useMenu";
+  import {useLayoutStore} from "~/stores/layout";
+
+  const { getMenu, hasMenu } = useMenu()
+
+  const menu = getMenu('Parameters')
+
+  const displayMenu = computed(() => {
+    return menu !== null && hasMenu('Parameters')
+  })
+</script>
+
+<style scoped lang="scss">
+  .title {
+    display: flex;
+    align-items: center;
+    height: 48px;
+    vertical-align: center;
+    margin-top: 18px;
+    padding: 4px 16px;
+    font-size: 18px;
+    color: rgb(var(--v-theme-on-neutral-very-soft));
+  }
+
+  .v-navigation-drawer {
+    background-color: white;
+    border-right: solid 1px rgb(var(--v-theme-neutral-strong));
+  }
+
+  :deep(.v-list-item-title), :deep(.v-icon)
+  {
+    font-size: 14px;
+    color: rgb(var(--v-theme-on-neutral-very-soft));
+  }
+
+  .v-list-item:hover,
+  .v-list-item.active,
+  :deep(.v-list-group__items .v-list-item)
+  {
+    background-color: rgb(var(--v-theme-neutral)) !important;
+    color: rgb(var(--v-theme-on-secondary-alt)) !important;
+  }
+
+  :deep(.v-list-item.active .v-list-item-title) {
+    font-weight: 800 !important;
+  }
+
+</style>

composables/layout/useMenu.ts

@@ -130,6 +130,6 @@ export const useMenu = () => {
     closeMenu,
     toggleMenu,
     isMenuOpened,
-    isInternalLink
+    isInternalLink,
   }
 }

config/theme.ts

@@ -26,6 +26,8 @@ interface Theme {
         'on-neutral--clickable': string,
         'neutral-soft': string,
         'on-neutral-soft': string,
+        'neutral-very-soft': string,
+        'on-neutral-very-soft': string,
         'danger': string,
         'on-danger': string,
         'success': string,
@@ -71,8 +73,11 @@ export const lightTheme: Theme = {
         'on-neutral': '#666666',
         'on-neutral--clickable': '#00997d',
 
-        'neutral-soft': '#ecf0f5',
-        'on-neutral-soft': '#464646',
+        'neutral-soft': '#f2f2f2',
+        'on-neutral-soft': '#333333',
+
+        'neutral-very-soft': '#ecf0f5',
+        'on-neutral-very-soft': '#333333',
 
         // Content
         'danger': '#f56954',
@@ -123,6 +128,9 @@ export const darkTheme: Theme = {
         'neutral-soft': '#090c11',
         'on-neutral-soft': '#cccccc',
 
+        'neutral-very-soft': '#333333',
+        'on-neutral-very-soft': '#ecf0f5',
+
         // Content
         'danger': '#f56954',
         'on-danger': '#ffffff',

services/layout/menuBuilder/parametersMenuBuilder.ts

@@ -14,25 +14,49 @@ export default class ParametersMenuBuilder extends AbstractMenuBuilder {
   build(): MenuGroup | null {
     const children: MenuItems = []
 
-    if (this.ability.can('display', 'parameters_page')) {
-      children.push(this.createItem('general_params', {name: 'fas fa-cogs'},`/parameters`, MENU_LINK_TYPE.V1))
+    if (!this.ability.can('display', 'parameters_page')) {
+      return null
     }
-    if (this.ability.can('display', 'parameters_communication_page')) {
-      children.push(this.createItem('communication_params', {name: 'fas fa-comments'},`/parameters/communication`, MENU_LINK_TYPE.V1))
-    }
-    if (this.ability.can('display', 'parameters_student_page')) {
-      children.push(this.createItem('students_params', {name: 'fas fa-users'},`/parameters/student`, MENU_LINK_TYPE.V1))
-    }
-    if (this.ability.can('display', 'parameters_education_page')) {
-      children.push(this.createItem('education_params', {name: 'fas fa-graduation-cap'},`/parameters/education`, MENU_LINK_TYPE.V1))
-    }
-    if (this.ability.can('display', 'parameters_bills_page')) {
-      children.push(this.createItem('bills_params', {name: 'fas fa-euro-sign'},`/parameters/billing`, MENU_LINK_TYPE.V1))
+
+    children.push(this.createItem('general_parameters', {name: 'fas fa-gears'},`/parameters/general_parameters`))
+    children.push(this.createItem('website', {name: 'fas fa-gears'},`/parameters/website`))
+
+    if (this.organizationProfile.isSchool) {
+      children.push(this.createItem('teaching', {name: 'fas fa-gears'}, `/parameters/teaching`))
+      children.push(this.createItem('intranet_access', {name: 'fas fa-gears'}, `/parameters/intranet`))
+      children.push(this.createItem('educationNotations', {name: 'fas fa-gears'}, `/parameters/education_notation`))
+      children.push(this.createItem('bulletin', {name: 'fas fa-gears'}, `/parameters/bulletin`))
+      children.push(this.createItem('educationTimings', {name: 'fas fa-gears'}, `/parameters/education_timings`))
+      children.push(this.createItem('attendances', {name: 'fas fa-gears'}, `/parameters/attendances`))
+      children.push(this.createItem('residenceAreas', {name: 'fas fa-gears'}, `/parameters/residence_areas`))
     }
-    if (this.ability.can('display', 'parameters_secure_page')) {
-      children.push(this.createItem('secure_params', {name: 'fas fa-lock'},`/parameters/secure`, MENU_LINK_TYPE.V1))
+
+    if (this.organizationProfile.hasModule('Sms')) {
+      children.push(this.createItem('sms_option', {name: 'fas fa-gears'}, `/parameters/sms`))
     }
 
+    children.push(this.createItem('super_admin', {name: 'fas fa-gears'},`/parameters/super_admin`))
+
+    // Voir nouveau découpage?
+    // if (this.ability.can('display', 'parameters_page')) {
+    //   children.push(this.createItem('general_params', {name: 'fas fa-cogs'},`/parameters`, MENU_LINK_TYPE.V1))
+    // }
+    // if (this.ability.can('display', 'parameters_communication_page')) {
+    //   children.push(this.createItem('communication_params', {name: 'fas fa-comments'},`/parameters/communication`, MENU_LINK_TYPE.V1))
+    // }
+    // if (this.ability.can('display', 'parameters_student_page')) {
+    //   children.push(this.createItem('students_params', {name: 'fas fa-users'},`/parameters/student`, MENU_LINK_TYPE.V1))
+    // }
+    // if (this.ability.can('display', 'parameters_education_page')) {
+    //   children.push(this.createItem('education_params', {name: 'fas fa-graduation-cap'},`/parameters/education`, MENU_LINK_TYPE.V1))
+    // }
+    // if (this.ability.can('display', 'parameters_bills_page')) {
+    //   children.push(this.createItem('bills_params', {name: 'fas fa-euro-sign'},`/parameters/billing`, MENU_LINK_TYPE.V1))
+    // }
+    // if (this.ability.can('display', 'parameters_secure_page')) {
+    //   children.push(this.createItem('secure_params', {name: 'fas fa-lock'},`/parameters/secure`, MENU_LINK_TYPE.V1))
+    // }
+
     if (children.length > 0) {
       return this.createGroup('parameters', undefined, children)
     }

services/layout/menuComposer.ts

@@ -22,7 +22,8 @@ export default class MenuComposer {
         MyAccessesMenuBuilder,
         MyFamilyMenuBuilder,
         ConfigurationMenuBuilder,
-        AccountMenuBuilder
+        AccountMenuBuilder,
+        ParametersMenuBuilder
     ]
 
     /**

types/interfaces.d.ts

@@ -127,10 +127,13 @@ interface organizationState extends BaseOrganizationProfile {
   currentActivityYear?: number | null
   modules?: Array<string>
   hasChildren?: boolean | null
+  isSchool: boolean
   showAdherentList?: boolean | null
   legalStatus?: string | null
   networks: Array<string>
   parents: Array<BaseOrganizationProfile>
+
+  hasModule(module: string): boolean
 }
 
 interface DolibarrContractLine {