fix: 🐛 Déplie le menu latéral sur mobile

Author: laruiss

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,