feat : ajout du composant sidebar
This commit is contained in:
227
app/story/sidebar/sidebarMenu.story.vue
Normal file
227
app/story/sidebar/sidebarMenu.story.vue
Normal file
@@ -0,0 +1,227 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user