Merge pull request #446 from dnum-mi/fix/dsfr-side-menu-on-mobile

fix/dsfr side menu on mobile

Author: laruiss

src/components/DsfrLanguageSelector/DsfrLanguageSelector.vue

@@ -25,19 +25,28 @@ export default defineComponent({
   data () {
     return {
       expanded: false,
+      collapsing: false,
     }
   },
   computed: {
     collapseStyle () {
       const baseStyle = {
         '--collapse': `-${this.languages.length * 114}px`,
       }
-      if (this.expanded) {
+      if (this.expanded || this.collapsing) {
         baseStyle['--collapse-max-height'] = 'none'
       }
       return baseStyle
     },
   },
+  watch: {
+    expanded (isExpanded) {
+      if (!isExpanded) {
+        this.collapsing = true
+        setTimeout(() => { this.collapsing = false }, 300)
+      }
+    },
+  },
   methods: {
     selectLanguage (language) {
       this.expanded = false
@@ -67,7 +76,7 @@ export default defineComponent({
       <div
         :id="id"
         class="fr-collapse  fr-translate__menu  fr-menu"
-        :class="{'fr-collapse--expanded': expanded}"
+        :class="{ 'fr-collapse--expanded': expanded, 'fr-collapsing': collapsing }"
         :style="collapseStyle"
       >
         <ul class="fr-menu__list">
@@ -91,10 +100,3 @@ export default defineComponent({
 </template>
 
 <style src="@gouvfr/dsfr/dist/component/translate/translate.main.min.css" />
-
-<style scoped>
-.fr-menu {
-  position: relative;
-  top: -1rem;
-}
-</style>

src/components/DsfrSideMenu/DsfrSideMenu.stories.js

@@ -78,34 +78,34 @@ MenuLateral.args = {
   headingTitle: 'Titre de la rubrique',
   menuItems: [
     {
-      id: 11,
+      id: '11',
       to: '/rubrique-1',
       text: 'Premier titre de niveau 1',
     },
     {
-      id: 12,
+      id: '12',
       to: '/rubrique-2',
       text: 'Deuxième titre de niveau 1',
       active: true,
       menuItems: [
         {
-          id: 21,
+          id: '21',
           to: '/rubrique-2/sous-rubrique-1',
           text: 'Premier titre de niveau 2',
         },
         {
-          id: 22,
+          id: '22',
           to: '/rubrique-2/sous-rubrique-2',
           text: 'Deuxième titre de niveau 2',
           active: true,
           menuItems: [
             {
-              id: 31,
+              id: '31',
               to: '/rubrique-2/sous-rubrique-2/sous-sous-rubrique-1',
               text: 'Premier titre de niveau 3',
             },
             {
-              id: 32,
+              id: '32',
               to: '/rubrique-2/sous-rubrique-2/sous-sous-rubrique-2',
               text: 'Deuxième titre de niveau 3',
               active: true,

src/components/DsfrSideMenu/DsfrSideMenu.vue

@@ -1,11 +1,13 @@
 <script setup>
+import { computed, ref, watch } from 'vue'
+
 import { getRandomId } from '../../utils/random-utils.js'
 
 // import '@gouvfr/dsfr/dist/component/sidemenu/sidemenu.module.js'
 
 import DsfrSideMenuList from './DsfrSideMenuList.vue'
 
-defineProps({
+const props = defineProps({
   buttonLabel: {
     type: String,
     default: 'Dans cette rubrique',
@@ -16,6 +18,10 @@ defineProps({
       return getRandomId('sidemenu')
     },
   },
+  collapseValue: {
+    type: String,
+    default: '-492px',
+  },
   menuItems: {
     type: Array,
     default: () => undefined,
@@ -27,6 +33,25 @@ defineProps({
 })
 
 defineEmits(['toggle-expand'])
+
+const expanded = ref(false)
+const collapsing = ref(false)
+const collapseStyle = computed(() => {
+  const baseStyle = {
+    '--collapse': props.collapseValue,
+  }
+  if (expanded.value || collapsing.value) {
+    baseStyle['--collapse-max-height'] = 'none'
+  }
+  return baseStyle
+})
+watch(expanded, (isExpanded) => {
+  console.log(isExpanded)
+  if (!isExpanded) {
+    collapsing.value = true
+    setTimeout(() => { collapsing.value = false }, 300)
+  }
+})
 </script>
 
 <template>
@@ -38,13 +63,16 @@ defineEmits(['toggle-expand'])
       <button
         class="fr-sidemenu__btn"
         :aria-controls="id"
-        aria-expanded="false"
+        :aria-expanded="expanded"
+        @click.prevent.stop="expanded = !expanded"
       >
         {{ buttonLabel }}
       </button>
       <div
         :id="id"
         class="fr-collapse"
+        :class="{'fr-collapse--expanded': expanded, 'fr-collapsing': collapsing}"
+        :style="collapseStyle"
       >
         <div class="fr-sidemenu__title">
           {{ headingTitle }}

src/components/DsfrSideMenu/DsfrSideMenuList.stories.js

@@ -93,34 +93,34 @@ MenuLateral.args = {
   headingTitle: 'Titre de la rubrique',
   menuItems: [
     {
-      id: 11,
+      id: '11',
       to: '/rubrique-1',
       text: 'Premier titre de niveau 1',
     },
     {
-      id: 12,
+      id: '12',
       to: '/rubrique-2',
       text: 'Deuxième titre de niveau 1',
       active: true,
       menuItems: [
         {
-          id: 21,
+          id: '21',
           to: '/rubrique-2/sous-rubrique-1',
           text: 'Premier titre de niveau 2',
         },
         {
-          id: 22,
+          id: '22',
           to: '/rubrique-2/sous-rubrique-2',
           text: 'Deuxième titre de niveau 2',
           active: true,
           menuItems: [
             {
-              id: 31,
+              id: '31',
               to: '/rubrique-2/sous-rubrique-2/sous-sous-rubrique-1',
               text: 'Premier titre de niveau 3',
             },
             {
-              id: 32,
+              id: '32',
               to: '/rubrique-2/sous-rubrique-2/sous-sous-rubrique-2',
               text: 'Deuxième titre de niveau 3',
               active: true,

src/components/DsfrTranscription/DsfrTranscription.stories.js

@@ -43,5 +43,5 @@ Transcription.args = {
   dark: false,
   title: 'Chats hiver',
   content: 'Des chatons jouant dans la neige',
-  collapseValue: '-114',
+  collapseValue: '-114px',
 }

src/components/DsfrTranscription/DsfrTranscription.vue

@@ -22,6 +22,7 @@ export default defineComponent({
     return {
       opened: false,
       expanded: false,
+      collapsing: false,
     }
   },
 
@@ -30,12 +31,20 @@ export default defineComponent({
       const baseStyle = {
         '--collapse': this.collapseValue,
       }
-      if (this.expanded) {
+      if (this.expanded || this.collapsing) {
         baseStyle['--collapse-max-height'] = 'none'
       }
       return baseStyle
     },
   },
+  watch: {
+    expanded (isExpanded) {
+      if (!isExpanded) {
+        this.collapsing = true
+        setTimeout(() => { this.collapsing = false }, 300)
+      }
+    },
+  },
 })
 </script>
 
@@ -52,7 +61,7 @@ export default defineComponent({
     <div
       id="fr-transcription__collapse-transcription-1354"
       class="fr-collapse"
-      :class="{ 'fr-collapse--expanded': expanded }"
+      :class="{ 'fr-collapse--expanded': expanded, 'fr-collapsing': collapsing }"
       :style="collapseStyle"
     >
       <dialog