rebase development

components/Layout/Header.vue

@@ -14,14 +14,14 @@ et aux préférences de l'utilisateur
   >
     <v-btn
       v-if="displayedMiniVariant"
-      class="menu-btn d-none d-sm-none d-md-flex" icon @click.stop="displayedMiniMenu()"
+      class="menu-btn d-none d-sm-none d-sm-none d-md-none d-lg-flex" icon @click.stop="displayedMiniMenu()"
     >
       <v-icon class="ot_white--text">
         mdi-menu{{ `${properties.miniVariant ? '' : '-open'}` }}
       </v-icon>
     </v-btn>
 
-    <v-btn class="menu-btn d-sm-flex d-md-none" icon @click.stop="displayedMenu()">
+    <v-btn class="menu-btn d-sm-flex d-md-flex d-lg-none" icon @click.stop="displayedMenu()">
       <v-icon class="ot_white--text">
         mdi-menu
       </v-icon>

components/Layout/Menu.vue

@@ -12,7 +12,10 @@ Prend en paramètre une liste de ItemMenu et les met en forme
     class="ot_dark_grey ot_menu_color--text"
     app
   >
-    <slot name="title"></slot>
+    <template #prepend>
+      <slot name="title"></slot>
+    </template>
+
     <v-list class="left-menu">
       <div v-for="(item, i) in menu" :key="i">
         <v-list-item
@@ -72,8 +75,12 @@ Prend en paramètre une liste de ItemMenu et les met en forme
         </v-list-group>
       </div>
     </v-list>
-    <slot name="foot"></slot>
+
+    <template #append>
+      <slot name="foot"></slot>
+    </template>
   </v-navigation-drawer>
+
 </template>
 
 <script lang="ts">
@@ -98,13 +105,18 @@ export default defineComponent({
   },
   setup(props){
     const {openMenu} = toRefs(props)
-    const open = ref(false)
+    const open = ref(true)
+
+    //Par défaut si l'écran est trop petit au chargement de la page, le menu doit être fermé.
+    if(process.client)
+      open.value = window.innerWidth >= 1264
+
     const unwatch: WatchStopHandle = watch(openMenu, (newValue, oldValue) => {
+      if(newValue !== oldValue)
       open.value = true
     })
-
     onUnmounted(() => {
-      unwatch()
+     unwatch()
     })
 
     return {

components/Ui/Input/Autocomplete.vue

@@ -25,7 +25,6 @@ Liste déroulante avec autocompletion
       :error-messages="errorMessage || violation ? $t(violation) : ''"
       :rules="rules"
       :chips="chips"
-      :menu-props="menuProps"
       @input="onChange($event)"
     >
       <template v-if="slotText" #item="data">
@@ -109,10 +108,6 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
-    menuProps: {
-      type: Object,
-      default: false
-    },
     rules: {
       type: Array,
       required: false,

composables/layout/menu.ts

@@ -137,6 +137,10 @@ class Menu {
    */
   useParametersMenuConstruct (): Ref {
     const menu: ItemsMenu | null = getParametersMenu(this.$config, this.$ability, this.$store)
+
+    // Si l'utilisateur possède au moins un menu alors le menu latéral sera accessible
+    this.$store.commit('profile/access/setHasLateralMenu', true)
+
     return ref(menu)
   }
 }

layouts/default.vue

@@ -37,7 +37,7 @@ export default defineComponent({
     const properties = reactive({
       clipped: false,
       miniVariant: false,
-      openMenu: false
+      openMenu: true
     })
 
     const displayedMenu: ComputedRef<boolean> = computed(() => store.state.profile.access.hasLateralMenu)

layouts/parameters.vue

@@ -4,7 +4,7 @@
     <client-only placeholder=" " />
 
     <v-app dark>
-      <LayoutMenu :menu="menu" :mini-variant="properties.miniVariant" >
+      <LayoutMenu :menu="menu" :mini-variant="properties.miniVariant" :openMenu="properties.openMenu" >
         <template #title>
           <h3 class="pl-4 pt-2" v-if="!properties.miniVariant">{{$t('parameters')}}</h3>
         </template>
@@ -17,9 +17,11 @@
         </template>
       </LayoutMenu>
 
-      <LayoutHeader @handle-open-menu-click="handleOpenMenu" />
+      <LayoutHeader @handle-open-menu-click="handleOpenMenu" @handle-open-mini-menu-click="handleOpenMiniMenu" />
 
       <v-main class="ot_content_color" >
+        <LayoutAlertbar class="mt-1"></LayoutAlertbar>
+
         <!-- Page will be rendered here-->
         <nuxt />
       </v-main>
@@ -38,21 +40,31 @@ export default defineComponent({
   middleware: ['auth'],
 
   setup () {
+    const { store } = useContext()
     const menu = $useMenu.setupContext().useParametersMenuConstruct()
 
     const properties = reactive({
       clipped: false,
-      miniVariant: false
+      miniVariant: false,
+      openMenu: true
     })
 
-    const handleOpenMenu = (miniVariant: boolean) => {
+    const displayedMenu: ComputedRef<boolean> = computed(() => store.state.profile.access.hasLateralMenu)
+
+    const handleOpenMenu = (openMenu: boolean) => {
+      properties.openMenu = openMenu
+    }
+
+    const handleOpenMiniMenu = (miniVariant: boolean) => {
       properties.miniVariant = miniVariant
     }
 
     return {
       properties,
       menu,
-      handleOpenMenu
+      displayedMenu,
+      handleOpenMenu,
+      handleOpenMiniMenu
     }
   }
 })