Merge branch 'feature/V8-4188-revue-css' into develop

components/Layout/Header.vue

@@ -21,7 +21,7 @@ Contient entre autres le nom de l'organisation, l'accès à l'aide et aux préf
 
     <LayoutThemeSwitcher v-if="false" /> <!-- En attente validation PO -->
 
-    <LayoutHeaderUniversalCreationCreateButton v-if="showUniversalButton" />
+    <LayoutHeaderUniversalCreationCreateButton v-if="showUniversalButton" class="mr-3" />
 
     <LayoutHeaderHomeBtn />
 

components/Layout/MainMenu.vue

@@ -31,14 +31,13 @@ Prend en paramètre une liste de ItemMenu et les met en forme
           :to="isInternalLink(item) ? item.to : undefined"
           exact
           height="48px"
-        ></v-list-item>
+        />
 
         <!-- Cas 2 : l'item a des enfants, c'est un groupe -->
         <v-list-group
           v-else
-          expand-icon="fas fa-angle-right"
-          collapse-icon="fas fa-angle-down"
-          v-model="item.expanded"
+          expand-icon="fas fa-angle-down"
+          collapse-icon="fas fa-angle-up"
         >
           <template #activator="{ props }">
             <v-list-item
@@ -47,7 +46,7 @@ Prend en paramètre une liste de ItemMenu et les met en forme
                 :title="$t(item.label)"
                 class="theme-secondary"
                 height="48px"
-            ></v-list-item>
+            />
           </template>
 
           <v-list-item
@@ -60,7 +59,7 @@ Prend en paramètre une liste de ItemMenu et les met en forme
             exact
             height="48px"
             class="theme-secondary-alt"
-          ></v-list-item>
+          />
         </v-list-group>
       </div>
     </v-list>
@@ -76,7 +75,7 @@ Prend en paramètre une liste de ItemMenu et les met en forme
 import {useMenu} from "~/composables/layout/useMenu";
 import {computed} from "@vue/reactivity";
 import { useDisplay } from 'vuetify'
-import {MenuGroup} from "~/types/layout";
+import { MenuGroup, MenuItem } from "~/types/layout";
 
 const { getMenu, hasMenu, isInternalLink, setMenuState, isMenuOpened } = useMenu()
 
@@ -84,11 +83,9 @@ const { mdAndUp, lgAndUp } = useDisplay()
 
 const menu = getMenu('Main')
 
-const hasMainMenu = computed(() => hasMenu('Main'))
-
 const isOpened = computed(() => isMenuOpened('Main'))
 
-let items
+let items: Array<MenuGroup | MenuItem>
 if (menu === null) {
   items = []
 } else if (menu.hasOwnProperty('children')) {
@@ -105,7 +102,7 @@ const displayMenu = computed(() => {
 // En vue md+, fermer le menu le passe simplement en mode rail
 // Sinon, le fermer le masque complètement
 const isRail = computed(() => {
-  return menu !== null && mdAndUp.value && !isOpened.value
+  return menu !== null && mdAndUp.value && !isOpened.value && !items.some((item) => item.expanded)
 })
 
 const unwatch = watch(lgAndUp, (newValue, oldValue) => {
@@ -114,12 +111,10 @@ const unwatch = watch(lgAndUp, (newValue, oldValue) => {
     setMenuState('Main', lgAndUp.value)
   }
 })
+
 onUnmounted(() => {
   unwatch()
 })
-
-
-
 </script>
 
 <style scoped lang="scss">
@@ -132,7 +127,7 @@ onUnmounted(() => {
   :deep(.v-icon),
   {
     font-size: 14px;
-    color: rgb(var(--v-theme-on-secondary), 0.7);
+    color: rgb(var(--v-theme-on-secondary));
   }
 
   .v-list-item__prepend {
@@ -168,7 +163,8 @@ onUnmounted(() => {
   :deep(.v-list-group__items .v-list-item)
   {
     border-left: 3px solid rgb(var(--v-theme-primary));
-    background-color: rgb(var(--v-theme-secondary-alt));
+    background-color: rgb(var(--v-theme-secondary-alt)) !important;
+    color: rgb(var(--v-theme-on-secondary-alt)) !important;
   }
 
   :deep(.v-list-group__items .v-list-item-title) {

config/theme.ts

@@ -61,7 +61,7 @@ export const lightTheme: Theme = {
         'secondary': '#324150',
         'on-secondary': '#f5f5f5',
 
-        'secondary-alt': '#2c3a48',
+        'secondary-alt': '#2a3745',
         'on-secondary-alt': '#ffffff',
 
         'neutral-strong': '#777777',