Merge pull request #1103 from dnum-mi/docs/#1097-ajout-documentation-vitepress-dsfrnavigation

docs: 📝 Ajout de la documentation vitepress pour DsfrNavigation

Author: laruiss

.vitepress/config.ts

@@ -254,6 +254,10 @@ const composants = [
     text: 'DsfrMultiselect',
     link: '/composants/DsfrMultiselect.md',
   },
+  {
+    text: 'DsfrNavigation',
+    link: '/composants/DsfrNavigation.md',
+  },
   {
     text: 'DsfrNotice',
     link: '/composants/DsfrNotice.md',

src/components/DsfrNavigation/DsfrNavigation.md

@@ -0,0 +1,57 @@
+# Navigation principale - `DsfrNavigation`
+
+## 🌟 Introduction
+
+Le composant `DsfrNavigation`, est le système central de navigation au sein d’un site. Elle permet d’orienter aisément l’usager à travers l'application voire même jusqu'aux confins de la galaxie !
+
+## 🛠️Props
+
+| Nom             | Type          | Défaut                  | Obligatoire   | Description                                                                                                 |
+|-----------------|---------------|-------------------------|---------------|-------------------------------------------------------------------------------------------------------------|
+| `id`            | `string`      | `() => useRandomId(...)`|               | Identifiant unique pour la nav. Si non spécifié, un ID aléatoire est généré.                                |
+| `label`         | `string`      | `Menu principal`        |               | Nom associé à la navigation. Utile pour l'accessibilité.                                                    |
+| `navItems`      | `array`       | `() => []`              | ✅            | Tableau contenant les liens ou sous menus accessibles depuis la navigation.                                 |
+
+## 📡Événements
+
+| Nom                 | Description                                                                                     |
+|---------------------|-------------------------------------------------------------------------------------------------|
+| `click`             | Événement émis au clic qui déclence l'ouverture ou la fermeture d'un menu.                      |
+| `keydown`           | Événement émis en appuyant sur la touche "Echap" qui déclence lla fermeture d'un menu ouvert.   |
+
+---
+
+## 🧩 Slots
+
+| Nom              | Description                                                                                                |
+|------------------|------------------------------------------------------------------------------------------------------------|
+| `default`        | Slot par défaut pour le contenu de la navigation, il se trouve dans la balise `<ul class="fr-nav__list">`. |
+
+---
+
+## 📝 Exemples
+
+Exemple simple d'utilisation de `DsfrNavigation` :
+
+::: code-group
+<Story data-title="Démo" minH="500px">
+  <DsfrNavigationDemo />
+</Story>
+
+<<< docs-demo/DsfrNavigationDemo.vue [Code de la démo]
+:::
+
+## ⚙️ Code source du composant
+
+::: code-group
+
+<<< DsfrNavigation.vue
+<<< DsfrNavigation.types.ts
+
+:::
+
+<script setup>
+import DsfrNavigationDemo from './docs-demo/DsfrNavigationDemo.vue'
+</script>
+
+Avec `DsfrNavigation`, toute destination est à portée de clic, Bon voyage !

src/components/DsfrNavigation/docs-demo/DsfrNavigationDemo.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import DsfrNavigation from '../DsfrNavigation.vue'
+
+const navItemsDemo = [
+  {
+    to: '/accueil',
+    text: 'Accueil',
+  },
+  {
+    to: '/tableau-de-bord',
+    text: 'Tableau de bord',
+  },
+  {
+    to: '/historique',
+    text: 'Historique',
+  },
+]
+</script>
+
+<template>
+  <DsfrNavigation
+    label="Menu principal démo"
+    :nav-items="navItemsDemo"
+  />
+</template>