makes parameters menu foldable

components/Layout/Header.vue

@@ -7,23 +7,10 @@ Contient entre autres le nom de l'organisation, l'accès à l'aide et aux préf
   <v-app-bar order="0" density="compact" class="theme-primary">
     <template #prepend>
       <v-app-bar-nav-icon
-        v-if="hasMainMenu && layoutStore.name !== 'parameters'"
-        :icon="isMainMenuOpened ? 'mdi:mdi-menu-open' : 'mdi:mdi-menu'"
-        @click="toggleMainMenu"
+        v-if="hasLateralMenu"
+        :icon="isLateralMenuOpened ? 'mdi:mdi-menu-open' : 'mdi:mdi-menu'"
+        @click="toggleLateralMenu"
       />
-
-      <div v-else-if="hasParametersMenu && layoutStore.name === 'parameters'">
-        <v-app-bar-nav-icon
-          v-if="mdAndUp"
-          icon="fa fa-gear"
-          @click="redirectToHome"
-        />
-        <v-app-bar-nav-icon
-          v-else
-          :icon="isParametersMenuOpened ? 'mdi:mdi-menu-open' : 'mdi:mdi-menu'"
-          @click="toggleParametersMenu"
-        />
-      </div>
     </template>
 
     <v-toolbar-title v-if="mdAndUp" v-text="title" />
@@ -75,8 +62,8 @@ import { useDisplay } from 'vuetify'
 import { useMenu } from '~/composables/layout/useMenu'
 import { useOrganizationProfileStore } from '~/stores/organizationProfile'
 import { useLayoutStore } from '~/stores/layout'
-import {useHomeUrl} from '~/composables/utils/useHomeUrl';
-import {useRedirect} from '~/composables/utils/useRedirect';
+import { useHomeUrl } from '~/composables/utils/useHomeUrl'
+import { useRedirect } from '~/composables/utils/useRedirect'
 
 const organizationProfile = useOrganizationProfileStore()
 const runtimeConfig = useRuntimeConfig()
@@ -88,15 +75,25 @@ const { hasMenu, isMenuOpened, toggleMenu } = useMenu()
 
 const { smAndUp, mdAndUp } = useDisplay()
 
-const hasMainMenu = computed(() => hasMenu('Main'))
-const isMainMenuOpened = computed(() => isMenuOpened('Main'))
-const toggleMainMenu = () => toggleMenu('Main')
-
-const hasParametersMenu = computed(() => hasMenu('Parameters'))
-const isParametersMenuOpened = computed(() => isMenuOpened('Parameters'))
-const toggleParametersMenu = () => toggleMenu('Parameters')
-
-const { redirectToHome } = useRedirect()
+const hasLateralMenu = computed(() => {
+  return (
+    (layoutStore.name !== 'parameters' && hasMenu('Main')) ||
+    (layoutStore.name === 'parameters' && hasMenu('Parameters'))
+  )
+})
+
+const isLateralMenuOpened = computed(() => {
+  return (layoutStore.name !== 'parameters' && isMenuOpened('Main')) ||
+         (layoutStore.name === 'parameters' && isMenuOpened('Parameters'))
+})
+
+const toggleLateralMenu = () => {
+  if (layoutStore.name === 'parameters') {
+    toggleMenu('Parameters')
+  } else {
+    toggleMenu('Main')
+  }
+}
 
 const ability = useAbility()
 const showUniversalButton =

components/Layout/MainMenu.vue

@@ -78,7 +78,7 @@ const { getMenu, hasMenu, isInternalLink, setMenuState, isMenuOpened } =
 
 const { mdAndUp, lgAndUp } = useDisplay()
 
-const menu = getMenu('Main')
+const menu: MenuGroup | null = getMenu('Main')
 
 const isOpened = computed(() => isMenuOpened('Main'))
 

components/Layout/Parameters/Menu.vue

@@ -1,15 +1,17 @@
 <template>
   <v-navigation-drawer
-    v-if="displayMenu"
-    v-model="isOpened"
+    v-model="displayMenu"
+    :rail="isRail"
+    :disable-resize-watcher="true"
     mobile-breakpoint="sm"
+    class="parameters-menu theme-neutral-very-soft"
   >
     <!--
     Le z-index est précisé pour éviter cette erreur : https://github.com/vuetifyjs/nuxt-module/issues/205
     Il pourra être retiré dès que le bug aura été corrigé
     -->
     <template #prepend>
-      <div class="title">
+      <div v-if="!isRail" class="title">
         <h3>{{ $t('parameters') }}</h3>
       </div>
     </template>
@@ -29,12 +31,11 @@
     <template #append>
       <v-btn
         :href="homeUrl"
-        prepend-icon="fa fa-right-from-bracket"
+        prepend-icon="far fa-square-caret-left"
         :flat="true"
-        color="on-neutral-very-soft"
-        class="cancel-btn py-2"
+        class="cancel-btn"
       >
-        {{ $t('exit') }}
+        {{ !isRail ? $t('exit') : '' }}
       </v-btn>
     </template>
   </v-navigation-drawer>
@@ -47,23 +48,28 @@ import { useMenu } from '~/composables/layout/useMenu'
 import { useHomeUrl } from '~/composables/utils/useHomeUrl'
 import type { MenuGroup, MenuItem } from '~/types/layout'
 
-const { mdAndUp } = useDisplay()
+const { mdAndUp, lgAndUp } = useDisplay()
 
 const { getMenu, hasMenu, isMenuOpened, setMenuState } = useMenu()
 
 const menu: MenuGroup | null = getMenu('Parameters')
 
+const isOpened = computed(() => isMenuOpened('Parameters'))
+
+// En vue lg+, on affiche toujours le menu
 const displayMenu = computed(() => {
-  return menu !== null && hasMenu('Parameters')
+  return menu !== null && hasMenu('Parameters') && (lgAndUp.value || isOpened.value)
 })
 
-const isOpened: ComputedRef<boolean> = computed(
-  () => mdAndUp.value || isMenuOpened('Parameters')
-)
-
-const closeMenu = () => {
-  setMenuState('Parameters', false)
-}
+// 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
+  )
+})
 
 const unwatch = watch(mdAndUp, () => {
   // Par défaut si l'écran est trop petit au chargement de la page, le menu doit rester fermé.
@@ -77,9 +83,32 @@ const { homeUrl } = useHomeUrl()
 onUnmounted(() => {
   unwatch()
 })
+
+// TODO voir à factoriser avec LayoutMainMenu
 </script>
 
 <style scoped lang="scss">
+
+.parameters-menu {
+  position: relative;
+  overflow: hidden;
+}
+
+.parameters-menu::before {
+  content: "\f013";
+  font-family: "Font Awesome 6 Free",serif;
+  font-weight: 900;
+  font-size: 300px;
+  color: rgb(var(--v-theme-neutral-soft));
+  position: absolute;
+  top: 90%;
+  left: 12%;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  user-select: none;
+}
+
+
 .title {
   display: flex;
   align-items: center;
@@ -147,9 +176,13 @@ onUnmounted(() => {
   flex-direction: row;
   justify-content: flex-start;
   border-radius: 0;
+
+  :deep(.v-icon) {
+    font-size: 18px;
+  }
 }
 
 :deep(.cancel-btn .v-btn__prepend) {
-  margin: 0 16px 4px 2px;
+  margin: 0 16px 0 2px;
 }
 </style>