Panneau latéral en position fixe, masqué par défaut et révélé par une animation
translateX. Peut être placé à gauche ou à droite.
Supporte le mode sidebar-shift qui pousse le contenu
de la page plutôt que de le recouvrir.
Le data-target du bouton déclencheur doit correspondre
exactement à l'id de la sidebar. Le JS gère les deux
formats : #id ou id.
⚠️ Toujours ajouter hidden sur la sidebar au chargement.
Sans cet attribut, la sidebar est considérée comme ouverte par défaut.
| CLASSE | ÉLÉMENT | DESCRIPTION |
|---|---|---|
.sidebar |
<aside> |
Conteneur principal. Position fixe, hauteur pleine page, fond et paddings via variables CSS.
Masqué par défaut via translateX. Transition de
0.2s ease sur le transform.
|
.sidebar-left |
.sidebar |
Ancre la sidebar à gauche. Applique left: 0,
une bordure droite et un border-radius côté droit. État fermé :
translateX(-100%).
|
.sidebar-right |
.sidebar |
Ancre la sidebar à droite. Applique right: 0,
une bordure gauche et un border-radius côté gauche. État fermé :
translateX(100%).
|
.sidebar-shift |
.sidebar |
Modificateur de comportement. Lorsque la sidebar est ouverte (.show),
le body reçoit une marge égale à
--sidebar-width via
:has(), poussant le contenu plutôt que de le
recouvrir.
|
La sidebar entre depuis la gauche et repousse ou recouvre le contenu selon la présence de .sidebar-shift.
La sidebar entre depuis la droite.
La sidebar pousse le contenu de la page au lieu de le recouvrir. Le body
reçoit automatiquement une marge via :has() dès que la
sidebar est ouverte.
Lorsqu'une .sidebar-shift est présente dans le DOM,
le body reçoit automatiquement une transition sur
margin-left et margin-right
(0.2s ease) via le sélecteur
:has(). Aucune classe manuelle n'est nécessaire.
| ÉTAT | ÉLÉMENT | DESCRIPTION |
|---|---|---|
| Fermée | hidden + .hide |
État initial. L'attribut hidden masque la sidebar.
La classe .hide maintient le
translateX hors écran.
|
| Ouverte | .show |
Applique translateX(0). La sidebar glisse dans
le viewport. L'attribut hidden est retiré avant
le déclenchement de l'animation.
|
| En fermeture | .hide |
Le JS remplace .show par .hide.
L'attribut hidden est reposé en fin de transition
via transitionend.
|
| Sans transition | .no-transition |
Posé temporairement par Sidebar.init() sur
toutes les sidebars et le body au chargement,
pour éviter les animations parasites à l'initialisation.
|
Le composant est piloté par la classe Sidebar.
Elle s'appuie sur la délégation d'événements (un seul listener sur
document) et utilise les transitions CSS pour l'animation.
import Sidebar from './Sidebar.js';
// Une seule instance suffit pour toute la page.
new Sidebar();
La classe implémente un guard Sidebar.initialized :
instancier Sidebar plusieurs fois n'entraîne aucun
doublon de listeners.
| ATTRIBUT | ÉLÉMENT | DESCRIPTION |
|---|---|---|
data-ui="sidebar" |
<button> |
Identifie le bouton comme déclencheur de la sidebar. |
data-target |
<button> |
Sélecteur de la sidebar cible. Accepte #id ou
id.
|
| MÉTHODE | DESCRIPTION |
|---|---|
Sidebar.init() |
Initialise aria-controls,
aria-expanded et
aria-labelledby sur tous les boutons
[data-ui="sidebar"]. Pose et retire
.no-transition pour éviter les animations au
chargement.
|
Sidebar.toggle(sidebar, button)
|
Bascule l'état de la sidebar. Appelle openSideBar
ou closeSidebar selon
Sidebar.isOpen().
|
Sidebar.isOpen(sidebar) |
Retourne true si la sidebar ne possède pas
l'attribut hidden.
|
Sidebar.openSideBar(sidebar,
button) |
Retire hidden, bascule les classes
.hide → .show.
Met à jour aria-expanded="true".
|
Sidebar.closeSidebar(sidebar,
button) |
Bascule .show → .hide.
Repose hidden en fin de transition via
transitionend. Met à jour
aria-expanded="false".
|
// Ouvrir une sidebar programmatiquement
const sidebar =
document.getElementById('ma-sidebar');
const btn =
document.querySelector('[data-target="#ma-sidebar"]');
Sidebar.openSideBar(sidebar,
btn);
// Fermer programmatiquement
Sidebar.closeSidebar(sidebar,
btn);
| TOKEN | RÔLE |
|---|---|
--sidebar-width |
Largeur de la sidebar |
--sidebar-background-color |
Couleur de fond |
--sidebar-padding-x |
Padding horizontal |
--sidebar-padding-y |
Padding vertical |
--sidebar-border-color |
Couleur de la bordure latérale |
--sidebar-border-style |
Style de la bordure (solid, dashed…)
|
--sidebar-border-width |
Épaisseur de la bordure |
--sidebar-border-radius |
Rayon des coins côté intérieur (droit pour sidebar-left, gauche pour sidebar-right)
|
| PRATIQUE | DÉTAIL |
|---|---|
aria-expanded |
Posé sur le bouton déclencheur. Mis à jour automatiquement par
Sidebar.openSideBar et
Sidebar.closeSidebar.
|
aria-controls |
Lie le bouton à l'id de la sidebar. Initialisé
par Sidebar.init().
|
aria-labelledby |
Associe la sidebar à son bouton déclencheur via l'id
du bouton. Ajouté automatiquement par Sidebar.init()
lorsque le bouton possède un id.
|
hidden |
L'attribut HTML natif masque la sidebar aux technologies d'assistance au chargement et en fin de fermeture. |
Élément <aside> |
Utilisez <aside> comme élément racine pour
que les lecteurs d'écran identifient la zone comme un contenu complémentaire.
|
Toujours ajouter hidden sur la sidebar au chargement.
Sans cet attribut, la sidebar est considérée comme ouverte et les classes
.show / .hide
sont initialisées en conséquence par le JS.
Instancier Sidebar après le chargement du DOM.
Utilisez DOMContentLoaded ou placez le script en bas
de page. Sidebar.init() lit l'état initial de toutes
les sidebars au moment de l'exécution.
Ne pas surcharger transform ou
display sur .sidebar
en CSS. Les classes .show et
.hide ainsi que l'attribut
hidden sont gérés exclusivement par le JS.
Toute surcharge peut casser l'animation ou bloquer l'accessibilité.
Le mode sidebar-shift repose sur le sélecteur CSS
:has() pour appliquer la marge sur le
body. Ce sélecteur est supporté par tous les
navigateurs modernes mais non disponible sur Firefox < 121.
Sidebar · WEBDEV-UI DOCS / V1