malio-layer-ui/app/story/sidebar/sidebarMenu.story.vue

<template>
  <Story title="Navigation/Sidebar">
    <Variant title="Peu de liens">
      <div class="flex h-[600px] border rounded-lg overflow-hidden">
        <MalioSidebar
          v-model="collapsed1"
          :sections="sectionsShort"
        >
          <template #logo>
            <span class="text-2xl font-bold text-m-primary">Malio</span>
          </template>
          <template #logo-collapsed>
            <span class="text-2xl font-bold text-m-primary">M</span>
          </template>
        </MalioSidebar>

        <div class="flex-1 p-6 bg-white">
          <p class="text-m-muted">
            Sidebar avec peu de liens, pas de scroll.
          </p>
        </div>
      </div>
    </Variant>

    <Variant title="Beaucoup de liens (scroll)">
      <div class="flex h-[600px] border rounded-lg overflow-hidden">
        <MalioSidebar
          v-model="collapsed2"
          :sections="sectionsLong"
        >
          <template #logo>
            <span class="text-2xl font-bold text-m-primary">Malio</span>
          </template>
          <template #logo-collapsed>
            <span class="text-2xl font-bold text-m-primary">M</span>
          </template>
        </MalioSidebar>

        <div class="flex-1 p-6 bg-white">
          <p class="text-m-muted">
            Sidebar avec beaucoup de liens, scroll visible.
          </p>
        </div>
      </div>
    </Variant>
  </Story>
</template>

<docs lang="md">
# MalioSidebar

Composant de navigation latérale avec support déplié/plié, sections groupées,
icônes et liens NuxtLink. Un bouton circulaire avec chevron permet de toggle
entre les deux états.

------------------------------------------------------------------------

## Props détaillées

### sections

- Type: `Array<{ label?: string; items: Array<{ label: string; icon: string; to: string }> }>`
- Description: Liste des sections du menu. Chaque section a un label optionnel et une liste d'items.

### modelValue

- Type: `boolean`
- Description: Contrôle l'état plié/déplié (`true` = plié). Supporte `v-model`.

### id

- Type: `string`
- Description: ID custom pour le composant.

### sidebarClass

- Type: `string`
- Description: Classes Tailwind additionnelles pour le conteneur sidebar.

### toggleClass

- Type: `string`
- Description: Classes Tailwind additionnelles pour le bouton toggle.

------------------------------------------------------------------------

## Slots

### logo

- Contenu affiché en haut quand la sidebar est dépliée.

### logo-collapsed

- Contenu affiché en haut quand la sidebar est pliée.

------------------------------------------------------------------------

## Comportement

- **Déplié** : affiche le logo, les labels de section et les items avec texte + icône.
- **Plié** : affiche le logo réduit et les icônes seules.
- **Toggle** : bouton circulaire positionné au centre du bord droit, chevron gauche/droite.
- **Contrôlé / non-contrôlé** : fonctionne avec ou sans `v-model`.

------------------------------------------------------------------------

## Accessibilité

- `aria-label` sur le bouton toggle ("Plier le menu" / "Déplier le menu").
- Navigation sémantique avec `<nav>` et `<ul>/<li>`.
- Liens via `NuxtLink` pour le routing côté client.

------------------------------------------------------------------------

## Events

### update:modelValue

- Émis à chaque toggle.
- Retourne `true` (plié) ou `false` (déplié).
</docs>

<script setup lang="ts">
import {ref} from 'vue'
import MalioSidebar from '../../components/malio/sidebar/Sidebar.vue'

const collapsed1 = ref(false)
const collapsed2 = ref(false)

const sectionsShort = [
  {
    label: 'LOGISTIQUE / TRANSPORT',
    icon: 'mdi:truck-delivery',
    items: [
      {label: 'Réception / Expédition', to: '/reception'},
      {label: 'Validation expédition', to: '/validation'},
    ],
  },
  {
    label: 'COMMERCIAL',
    icon: 'mdi:handshake',
    items: [
      {label: 'Répertoire fournisseurs', to: '/fournisseurs'},
      {label: 'Répertoire clients', to: '/clients'},
    ],
  },
]

const sectionsLong = [
  {
    label: 'LOGISTIQUE / TRANSPORT',
    icon: 'mdi:truck-delivery',
    items: [
      {label: 'Réception / Expédition', to: '/reception'},
      {label: 'Validation expédition', to: '/validation'},
      {label: 'Voyage', to: '/voyage'},
      {label: 'Ticket de pesée', to: '/pesee'},
      {label: 'Bon de réception', to: '/bon-reception'},
      {label: "Bon d'expédition", to: '/bon-expedition'},
    ],
  },
  {
    label: 'USINE / PRODUCTION',
    icon: 'mdi:factory',
    items: [
      {label: 'Fabrication en cours', to: '/fabrication'},
      {label: 'Liste des fabrications', to: '/fabrications'},
    ],
  },
  {
    label: 'COMMERCIAL',
    icon: 'mdi:handshake',
    items: [
      {label: 'Répertoire fournisseurs', to: '/fournisseurs'},
      {label: 'Compagnie fournisseurs', to: '/compagnie-fournisseurs'},
      {label: 'Répertoire clients', to: '/clients'},
      {label: 'Contrats en cours', to: '/contrats'},
      {label: 'Commissions Clients', to: '/commissions'},
      {label: 'Attribution expédition', to: '/attribution'},
    ],
  },
  {
    label: 'PRIX',
    icon: 'mdi:tag',
    items: [
      {label: "Prix d'achat/vente", to: '/prix-achat'},
      {label: "Prix d'achat spécifiques", to: '/prix-specifiques'},
      {label: 'Prix de ventes clients', to: '/prix-vente'},
    ],
  },
  {
    label: 'FACTURATION',
    icon: 'mdi:receipt',
    items: [
      {label: 'Expéditions à facturer', to: '/expeditions-facturer'},
      {label: 'Factures', to: '/factures'},
    ],
  },
  {
    label: 'TECHNIQUE',
    icon: 'mdi:cog',
    items: [
      {label: 'Répertoire prestataires', to: '/prestataires'},
      {label: 'Répertoire transporteurs', to: '/transporteurs'},
    ],
  },
  {
    label: 'SUIVI HEURES',
    icon: 'mdi:clock-outline',
    items: [
      {label: 'Heure Usine', to: '/heure-usine'},
      {label: 'Heure Extras', to: '/heure-extras'},
      {label: 'Heure Ferme', to: '/heure-ferme'},
    ],
  },
  {
    label: 'ADMINISTRATION',
    icon: 'mdi:shield-account',
    items: [
      {label: 'Catalogue produits', to: '/catalogue'},
      {label: 'Éditer étiquettes', to: '/etiquettes'},
      {label: 'Organisation catégorie', to: '/organisation'},
    ],
  },
]
</script>