docs: 📝 ajoute la doc vitepress de DsfrSideMenu

Author: JoelPagniez

.vitepress/config.ts

@@ -338,6 +338,10 @@ const composants = [
     text: 'DsfrSelect',
     link: '/composants/DsfrSelect.md',
   },
+  {
+    text: 'DsfrSideMenu',
+    link: '/composants/DsfrSideMenu.md',
+  },
   {
     text: 'DsfrSkipLinks',
     link: '/composants/DsfrSkipLinks.md',

src/components/DsfrSideMenu/DsfrSideMenu.md

@@ -1,12 +1,18 @@
-# Menu latéral - `DsfrSideMenu`
+# Menu latéral
 
-## 🌟 Introduction
-
-Le menu latéral est un composant de navigation verticale qui peut être réduit/expandé. Il suit les spécifications du Système de Design Français (DSFR) pour les menus de navigation latérale.
+Le menu latéral est un système de navigation secondaire présentant une liste verticale de liens placée à côté du contenu.
 
 Le composant `DsfrSideMenu` fournit une navigation latérale avec support du collapse/expand, gestion des éléments de menu imbriqués, et intégration avec le routeur Vue.
 
-## 📐 Structure
+## 🌟 Introduction
+
+Le menu latéral est un système de navigation secondaire présentant une liste verticale de liens placée à côté du contenu.
+
+🏅 La documentation sur le menu latéral sur le [DSFR](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/menu-lateral)
+
+<VIcon name="vi-file-type-storybook" /> La story sur le menu latéral sur le storybook de [VueDsfr](https://storybook.vue-ds.fr/?path=/docs/composants-dsfrfsidemenu--docs)
+
+## 📐 Structure
 
 Le menu latéral crée :
 
@@ -16,17 +22,17 @@ Le menu latéral crée :
 - Support des liens externes et internes avec le routeur Vue
 - Gestion automatique des états actifs et expandés
 
-## 🛠️ Props
+## 🛠️ Props
 
 | nom               | type                       | défaut                  | obligatoire | description                                              |
 |-------------------|----------------------------|-------------------------|-------------|----------------------------------------------------------|
-| `buttonLabel`     | `string`                   | `'Dans cette rubrique'` |             | Texte du bouton de toggle                               |
-| `id`              | `string`                   | `() => useRandomId(...)`|             | Identifiant unique du menu                              |
+| `buttonLabel`     | `string`                   | `'Dans cette rubrique'` |             | Label associé au bouton en état responsive dont le rôle est de déplier le side menu.                               |
+| `id`              | `string`                   | `() => useRandomId(...)`|             | (optionnel) Valeur de l’attribut id du side menu. Par défaut, un id pseudo-aléatoire sera donné.                              |
 | `sideMenuListId`  | `string`                   | `() => useRandomId(...)`|             | Identifiant de la liste de menu                         |
 | `collapseValue`   | `string`                   | `'-492px'`              |             | Valeur de collapse CSS                                  |
-| `menuItems`       | `DsfrSideMenuListItemProps[]` | `undefined`             |             | Éléments du menu (structure imbriquée)                 |
-| `headingTitle`    | `string`                   | `''`                    |             | Titre du menu                                           |
-| `titleTag`        | `string`                   | `'h3'`                  |             | Balise HTML pour le titre                               |
+| `menuItems`       | `DsfrSideMenuListItemProps[]` | `undefined`             |             | Tableau d’objets contenant les props attendus par DsfrSideMenuList.                 |
+| `headingTitle`    | `string`                   | `''`                    |             | Titre de la rubrique (c’est le titre du menu latéral).                                           |
+| `titleTag`         | [*`TitleTag`*](/docs/types.md#title-tag "'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'") | `'h3'`          |             | Balise HTML pour le titre  |
 | `focusOnExpanding`| `boolean`                  | `true`                  |             | Focus automatique lors de l'expansion                  |
 
 ## 📡 Événements
@@ -45,7 +51,7 @@ Le menu latéral crée :
 
 ## 📝 Exemples
 
-Exemple d'utilisation basique du menu latéral :
+### Exemple d'utilisation basique du menu latéral
 
 ::: code-group
 
@@ -81,6 +87,16 @@ const onToggleExpand = (id: string) => {
 
 :::
 
+### Exemple plus complet
+
+::: code-group
+
+<Story data-title="Démo" min-h="350px">
+  <DsfrSideMenuDemo />
+</Story>
+
+<<< docs-demo/DsfrSideMenuDemo.vue [Code de la démo]
+
 ## ⚙️ Code source du composant
 
 ::: code-group
@@ -89,3 +105,7 @@ const onToggleExpand = (id: string) => {
 <<< DsfrSideMenu.types.ts
 
 :::
+
+<script setup lang="ts">
+import DsfrSideMenuDemo from './docs-demo/DsfrSideMenuDemo.vue'
+</script>

src/components/DsfrSideMenu/docs-demo/DsfrSideMenuDemo.vue

@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+import DsfrSideMenu from '../DsfrSideMenu.vue'
+
+const headingTitle = 'Titre de la rubrique'
+const menuItems = ref([
+  {
+    id: '11',
+    to: '/rubrique-1',
+    text: 'Premier titre de niveau 1',
+  },
+  {
+    id: '12',
+    text: 'Deuxième titre de niveau 1',
+    active: true,
+    menuItems: [
+      {
+        id: '21',
+        to: '/rubrique-2/sous-rubrique-1',
+        text: 'Premier titre de niveau 2',
+      },
+      {
+        id: '22',
+        text: 'Deuxième titre de niveau 2',
+        active: true,
+        menuItems: [
+          {
+            id: '31',
+            to: '/rubrique-2/sous-rubrique-2/sous-sous-rubrique-1',
+            text: 'Premier titre de niveau 3',
+          },
+          {
+            id: '32',
+            to: '/rubrique-2/sous-rubrique-2/sous-sous-rubrique-2',
+            text: 'Deuxième titre de niveau 3',
+            active: true,
+          },
+        ],
+      },
+    ],
+  },
+])
+</script>
+
+<template>
+  <div class="fr-container fr-my-2w">
+    <h2>SideMenu</h2>
+
+    <DsfrSideMenu
+      :heading-title="headingTitle"
+      :menu-items="menuItems"
+    />
+  </div>
+</template>