various responsive fixes

components/Layout/Dialog.vue

@@ -34,6 +34,8 @@
 </template>
 
 <script setup lang="ts">
+import {useDisplay} from "vuetify";
+
 const props = defineProps({
   show: {
     type: Boolean,

components/Layout/Header.vue

@@ -15,13 +15,10 @@ 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'"
           class="text-ot-white"
           @click="toggleMainMenu"
-      >
-      </v-app-bar-nav-icon>
+      />
     </template>
 
-    <v-toolbar-title v-text="title" />
-
-<!--    <v-spacer />-->
+    <v-toolbar-title v-if="mdAndUp" v-text="title"/>
 
     <LayoutHeaderUniversalCreationCreateButton v-if="showUniversalButton" />
 
@@ -56,8 +53,8 @@ Contient entre autres le nom de l'organisation, l'accès à l'aide et aux préf
 import {computed, ComputedRef} from "@vue/reactivity";
 import {useMenu} from "~/composables/layout/useMenu";
 import {useAbility} from "@casl/vue";
+import { useDisplay } from 'vuetify'
 import {useOrganizationProfileStore} from "~/stores/organizationProfile";
-import {useRuntimeConfig} from "#app";
 
 const organizationProfile = useOrganizationProfileStore()
 
@@ -65,6 +62,8 @@ const title: ComputedRef<string> = computed(() => organizationProfile.name ?? 'O
 
 const { hasMenu, isMenuOpened, toggleMenu } = useMenu()
 
+const { mdAndUp } = useDisplay()
+
 const hasMainMenu = computed(() => hasMenu('Main'))
 const isMainMenuOpened = computed(() => isMenuOpened('Main'))
 const toggleMainMenu = () => toggleMenu('Main')

components/Layout/MainMenu.vue

@@ -6,7 +6,7 @@ Prend en paramètre une liste de ItemMenu et les met en forme
 <template>
   <v-navigation-drawer
       v-model="displayMenu"
-      :rail="!isOpened"
+      :rail="isRail"
       :disable-resize-watcher="true"
       class="bg-ot-dark-grey text-ot-menu-color main-menu"
   >
@@ -76,18 +76,36 @@ Prend en paramètre une liste de ItemMenu et les met en forme
 <script setup lang="ts">
 import {useMenu} from "~/composables/layout/useMenu";
 import {computed} from "@vue/reactivity";
+import { useDisplay } from 'vuetify'
 
 const { buildMenu, hasMenu, isInternalLink, openMenu, isMenuOpened } = useMenu()
 
+const { mdAndUp } = useDisplay()
+
 const menu = buildMenu('Main')
 
-const displayMenu = computed(() => hasMenu('Main'))
+const hasMainMenu = computed(() => hasMenu('Main'))
+
 const isOpened = computed(() => isMenuOpened('Main'))
 
+// En vue md+, on affiche toujours le menu
+const isRail = computed(() => mdAndUp.value && !isOpened.value)
+const displayMenu = computed(() => hasMainMenu && (mdAndUp.value || isOpened.value))
+
+console.log(process.client, mdAndUp.value)
+
+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 && window.innerWidth >= 1264) {
+  if (process.client && mdAndUp.value) {
     openMenu('Main')
-}
+  }
+})
+onUnmounted(() => {
+  unwatch()
+})
+
+
+
 </script>
 
 <style scoped lang="scss">

components/Layout/SubHeader/ActivityYear.vue

@@ -1,6 +1,7 @@
 <template>
   <main class="d-flex">
-    <span class="mr-2 font-weight-bold">{{ $t(label) }} : </span>
+    <span v-show="mdAndUp" class="mr-2 font-weight-bold">{{ $t(label) }} : </span>
+
     <UiXeditableText
       class="activity-year-input bg-ot-light-grey"
       type="number"
@@ -28,11 +29,13 @@ import {useOrganizationProfileStore} from "~/stores/organizationProfile";
 import {useAccessProfileStore} from "~/stores/accessProfile";
 import {Access} from "~/models/Access/Access";
 import {Ref, ref} from "@vue/reactivity";
+import {useDisplay} from "vuetify";
 
 const { em } = useEntityManager()
 const accessProfileStore = useAccessProfileStore()
 const organizationProfileStore = useOrganizationProfileStore()
 const formStore = useFormStore()
+const { mdAndUp } = useDisplay()
 
 const currentActivityYear: Ref<number | null> = ref(accessProfileStore.activityYear)
 const yearPlusOne: boolean = !organizationProfileStore.isManagerProduct

components/Layout/SubHeader/DataTiming.vue

@@ -1,6 +1,6 @@
 <template>
   <main class="d-flex align-baseline">
-    <span class="mr-2 text-ot-dark_grey font-weight-bold">{{ $t('display_data') }} : </span>
+    <span v-show="mdAndUp" class="mr-2 text-ot-dark_grey font-weight-bold">{{ $t('display_data') }} : </span>
 
     <v-btn-toggle
       ref="toggle"
@@ -33,7 +33,7 @@ import {useFormStore} from "~/stores/form";
 import {useAccessProfileStore} from "~/stores/accessProfile";
 import {Ref} from "@vue/reactivity";
 import {useEntityManager} from "~/composables/data/useEntityManager";
-import {useTheme} from "vuetify";
+import {useDisplay, useTheme} from "vuetify";
 import {Access} from "~/models/Access/Access";
 
 // TODO: en v3.0.5, pas de solution documentée pour renseigner directement la couler dans le template, à revoir
@@ -42,6 +42,7 @@ const color = useTheme().current.value.colors['ot-green']
 const { setDirty } = useFormStore()
 const accessProfileStore = useAccessProfileStore()
 const { em } = useEntityManager()
+const { mdAndUp } = useDisplay()
 
 const toggle = ref(null)
 
@@ -52,8 +53,6 @@ const historicalValue: Ref<Array<string>> = ref(historicalChoices.filter((item)
 const onUpdate = async (newValue: Array<string>) => {
   historicalValue.value = newValue
 
-  console.log(historicalValue.value)
-
   if (accessProfileStore.id === null) {
     throw new Error('Invalid profile id')
   }

components/Layout/Subheader.vue

@@ -6,10 +6,10 @@ Contient entre autres le breadcrumb, les commandes de changement d'année et les
 <template>
   <main>
     <v-card
-      class="d-md-flex bg-ot-light-grey text-body-2"
+      class="d-md-flex bg-ot-light-grey text-body-2 px-2"
       flat
     >
-      <LayoutSubHeaderBreadcrumbs class="mr-auto d-sm-none d-md-flex d-none d-sm-flex" />
+      <LayoutSubHeaderBreadcrumbs v-show="mdAndUp" class="mr-auto d-sm-none d-md-flex d-none d-sm-flex" />
 
       <v-card
         class="d-md-flex pt-2 mr-6 align-baseline"
@@ -33,7 +33,9 @@ Contient entre autres le breadcrumb, les commandes de changement d'année et les
     import {useAccessProfileStore} from "~/stores/accessProfile";
     import {computed, ComputedRef, ref, Ref} from "@vue/reactivity";
     import {useMenu} from "~/composables/layout/useMenu";
+    import {useDisplay} from "vuetify";
 
+    const { mdAndUp } = useDisplay()
     const accessProfile = useAccessProfileStore()
     const { hasMenu } = useMenu()