Menu latéral
القائمة الجانبيةSide menu
src/dsm/components/side-menu.tsxImport
import { SideMenu } from "@/dsm/components/side-menu";Exemples
Menu à deux niveaux
Un groupe déplié par défaut, un élément actif.
Menu collant
Reste visible pendant le défilement du contenu voisin.
Faites défiler cette colonne : le menu reste ancré sous l'en-tête grâce à l'option sticky.
Le Royaume du Maroc compte 12 régions, elles-mêmes subdivisées en préfectures et provinces.
Chaque région dispose d'un conseil élu et de compétences propres en matière de développement local.
Les communes assurent la gestion des services de proximité : état civil, urbanisme, voirie.
Mise en page de rubrique
Le menu latéral à côté du contenu d'une rubrique « État civil ».
Demander un extrait d'acte de naissance
L'extrait d'acte de naissance peut être demandé en ligne pour toute personne née au Maroc, sur présentation d'une pièce d'identité. Le document est livré au format PDF, signé électroniquement, et a la même valeur que l'original papier.
Délai de traitement : 48 heures ouvrées. Service entièrement gratuit.
Usage
Quand l'utiliser
- Utilisez le menu latéral pour la navigation locale d'une rubrique riche (état civil, institutions, un centre d'aide) affichée à côté du contenu.
- Activez `sticky` sur une page longue pour garder le menu visible pendant la lecture.
Quand ne pas l'utiliser
- N'utilisez pas le menu latéral pour la navigation principale du site : c'est le rôle de l'en-tête.
- Ne dépassez pas deux niveaux : au-delà, la rubrique gagnerait à être scindée en plusieurs pages.
Accessibilité & langues
Accessibilité
- Le conteneur est un `nav` avec `aria-label` (le titre de la rubrique, ou « Dans cette rubrique » par défaut).
- Chaque groupe repliable est un déclencheur `button` natif ; son état ouvert/fermé pilote la rotation du chevron.
- L'élément courant porte `aria-current="page"` en plus de son style visuel, pour ne pas reposer uniquement sur la couleur.
RTL & multilingue
- La bordure d'état (active ou groupe ouvert) est posée en `border-s` : elle reste du côté « début » de la ligne, à droite en arabe.
- Le chevron de dépliage ne se retourne pas — seule sa rotation à l'ouverture change.
Propriétés
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| title | ReactNode | — | Titre affiché au-dessus du menu et utilisé comme `aria-label` s'il s'agit d'une chaîne. |
| items* | SideMenuItem[] | — | `{ label, href?, active?, items?: SideMenuLink[] }` — un élément avec `items` devient un groupe repliable. |
| sticky | boolean | false | Fixe le menu sous l'en-tête pendant le défilement. |
| className | string | — | Classes Tailwind supplémentaires. |