implement responsiveness, upgrade vuetify to 3.4.6

components/Layout/Header.vue

@@ -15,10 +15,17 @@ Contient entre autres le nom de l'organisation, l'accès à l'aide et aux préf
           :icon="isMainMenuOpened ? 'mdi:mdi-menu-open' : 'mdi:mdi-menu'"
           @click="toggleMainMenu"
       />
-      <v-app-bar-nav-icon
-        v-if="layoutStore.name === 'parameters'"
-        icon="fa fa-gear"
-      />
+      <div v-else-if="hasParametersMenu && layoutStore.name === 'parameters'">
+        <v-app-bar-nav-icon
+          v-if="mdAndUp"
+          icon="fa fa-gear"
+        />
+        <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"/>
@@ -73,6 +80,10 @@ 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 ability = useAbility()
 const showUniversalButton =
     ability.can('manage', 'users')

components/Layout/ParametersMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-navigation-drawer v-model="displayMenu">
+  <v-navigation-drawer v-if="displayMenu" v-model="isOpened" mobile-breakpoint="sm">
     <template v-slot:prepend>
       <div class="title">
         <h3>{{ $t('parameters') }}</h3>
@@ -35,8 +35,12 @@
   import {useLayoutStore} from "~/stores/layout";
   import UrlUtils from "~/services/utils/urlUtils";
   import {useHomeUrl} from "~/composables/utils/useHomeUrl";
+  import {useDisplay} from "vuetify";
+  import {computed} from "@vue/reactivity";
 
-  const { getMenu, hasMenu } = useMenu()
+  const { mdAndUp, lgAndUp } = useDisplay()
+
+  const { getMenu, hasMenu, isMenuOpened, setMenuState } = useMenu()
 
   const menu = getMenu('Parameters')
 
@@ -44,7 +48,20 @@
     return menu !== null && hasMenu('Parameters')
   })
 
+  const isOpened = computed(() => isMenuOpened('Parameters'))
+
+  const unwatch = watch(mdAndUp, (newValue, oldValue) => {
+    // Par défaut si l'écran est trop petit au chargement de la page, le menu doit rester fermé.
+    if (process.client && menu !== null) {
+      setMenuState('Parameters', mdAndUp.value)
+    }
+  })
+
   const { homeUrl } = useHomeUrl()
+
+  onUnmounted(() => {
+    unwatch()
+  })
 </script>
 
 <style scoped lang="scss">
@@ -105,7 +122,7 @@
     border-top: solid 1px rgb(var(--v-theme-on-neutral-very-soft));
     display: flex;
     flex-direction: row;
-    justify-content: start;
+    justify-content: flex-start;
   }
 
   :deep(.cancel-btn .v-btn__prepend) {

layouts/parameters.vue

@@ -34,7 +34,6 @@ import {useLayoutStore} from "~/stores/layout";
 
 const layoutStore = useLayoutStore()
 layoutStore.name = 'parameters'
-
 </script>
 
 <style scoped lang="scss">

package.json

@@ -48,7 +48,7 @@
     "vite-plugin-vuetify": "^1.0.2",
     "vue-tel-input-vuetify": "^1.5.3",
     "vue-the-mask": "^0.11.1",
-    "vuetify": "3.3.5",
+    "vuetify": "3.4.6",
     "yaml-import": "^2.0.0"
   },
   "devDependencies": {

services/layout/menuBuilder/parametersMenuBuilder.ts

@@ -23,10 +23,10 @@ export default class ParametersMenuBuilder extends AbstractMenuBuilder {
 
     if (this.organizationProfile.isSchool) {
       children.push(this.createItem('teaching', {name: 'fas fa-school'}, `/parameters/teaching`))
-      children.push(this.createItem('intranet_access', {name: 'fas fa-arrows-down-to-people'}, `/parameters/intranet`))
+      children.push(this.createItem('intranet_breadcrumbs', {name: 'fas fa-arrows-down-to-people'}, `/parameters/intranet`))
       children.push(this.createItem('educationNotations', {name: 'fas fa-graduation-cap'}, `/parameters/education_notation`))
       children.push(this.createItem('bulletin', {name: 'fas fa-file-lines'}, `/parameters/bulletin`))
-      children.push(this.createItem('educationTimings', {name: 'fas fa-clock'}, `/parameters/education_timings`))
+      children.push(this.createItem('education_timings_breadcrumbs', {name: 'fas fa-clock'}, `/parameters/education_timings`))
       children.push(this.createItem('attendances', {name: 'fas fa-user-times'}, `/parameters/attendances`))
       children.push(this.createItem('residenceAreas', {name: 'fas fa-location-dot'}, `/parameters/residence_areas`))
     }

yarn.lock

@@ -9343,10 +9343,10 @@ vue@^3.3.4:
     "@vue/server-renderer" "3.3.4"
     "@vue/shared" "3.3.4"
 
-vuetify@3.3.5:
-  version "3.3.5"
-  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-3.3.5.tgz#b927214d106122240e79f4d65e49bfec0e86e189"
-  integrity sha512-vkfPgPmKfSJa+jq6Ov+CTg7L1t2jLPKa7Slef9OrVHcLqg+gLuIj0z4PJE6E9HjFTUbgZShShOGxps52REJRIA==
+vuetify@3.4.6:
+  version "3.4.6"
+  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-3.4.6.tgz#2ea7e9d97bb90a856a96b9e83f14c01d69792025"
+  integrity sha512-Zp6BjKkNcnyHlOmr01Y/Rc4d686PORO+hcpfM76qRaDMIU4H1GnP0JIF3jwxI1q3Uj/2bHKLwn81oCLJZd+8sg==
 
 vuetify@^2.2.11:
   version "2.6.15"