Panneau latéral rétractable qui anime sa largeur entre une version réduite (icônes seules) et une version
étendue (icônes + texte). Le texte de chaque item est masqué via
.sidebar-text lorsque la sidebar est en état réduit.
Supporte le mode sidebar-shift pour pousser le contenu
de la page.
Chaque item doit contenir un .sidebar-icon et un
.sidebar-text. Le JS masque
.sidebar-text via
.hide lorsque la sidebar est réduite, et le réaffiche
via .show lorsqu'elle est étendue.
Le bouton toggle peut être placé à l'intérieur de la sidebar elle-même, comme premier
item. Il suffit de lui ajouter data-ui="sidebar" et
data-target pointant vers la sidebar parente.
Cela permet à l'utilisateur d'ouvrir et fermer la sidebar depuis l'intérieur.
| CLASSE | ÉLÉMENT | DESCRIPTION |
|---|---|---|
.sidebar-compact |
<aside> |
Conteneur principal. Position fixe, hauteur pleine page. Affichage en colonne avec
justify-content: space-between. Anime la
width entre
--sidebar-compact-width-reduce (réduit) et
--sidebar-compact-width (étendu) en
0.2s ease.
|
.sidebar-left |
.sidebar-compact |
Ancre la sidebar à gauche avec bordure droite et border-radius côté droit. |
.sidebar-right |
.sidebar-compact |
Ancre la sidebar à droite avec bordure gauche et border-radius côté gauche. |
.sidebar-shift |
.sidebar-compact |
Le body reçoit une marge via
:has() : égale à
--sidebar-compact-width en état
.show, réduite à
--sidebar-compact-width-reduce en état
.hide.
|
.sidebar-item |
<button> / <a> |
Item de navigation. Applique overflow-x: hidden
pour masquer le texte sans décalage visuel lors de la transition de largeur.
En état .hide : centré, texte masqué.
En état .show : aligné à gauche, texte visible.
|
.sidebar-icon |
<span> |
Icône de l'item. Toujours visible quel que soit l'état de la sidebar. |
.sidebar-text |
<span> |
Libellé textuel de l'item. Masqué (display: none)
lorsque .sidebar-item porte la classe
.hide. Visible lorsqu'il porte
.show.
|
| ÉTAT | ÉLÉMENT | DESCRIPTION |
|---|---|---|
| Réduite | hidden + .hide |
État initial si hidden est présent. La sidebar prend
la largeur --sidebar-compact-width-reduce.
Les .sidebar-item portent la classe
.hide : texte masqué, items centrés.
|
| Étendue | .show |
La sidebar prend la largeur --sidebar-compact-width.
Les .sidebar-item portent la classe
.show : texte visible, items alignés à gauche.
|
| Sans transition | .no-transition |
Posé temporairement par Sidebar.init() au
chargement pour éviter les animations parasites lors de l'initialisation des états.
|
La sidebar compact est pilotée par la même classe Sidebar
que les autres variantes. Elle introduit deux méthodes supplémentaires :
initCompact pour l'état initial des items, et
showSidebarCompact /
hideSidebarCompact pour basculer la visibilité du texte
à chaque toggle.
import Sidebar from './Sidebar.js';
// Une seule instance gère toutes les variantes de sidebar.
new Sidebar();
| ATTRIBUT | ÉLÉMENT | DESCRIPTION |
|---|---|---|
data-ui="sidebar" |
<button> |
Identifie le bouton comme déclencheur. Peut être placé à l'extérieur ou à l'intérieur de la sidebar compact elle-même. |
data-target |
<button> |
Sélecteur de la sidebar cible. Accepte #id ou
id.
|
| MÉTHODE | DESCRIPTION |
|---|---|
Sidebar.initCompact() |
Appelée au chargement. Parcourt toutes les .sidebar-compact
et initialise les classes .show /
.hide sur chaque
.sidebar-item selon l'état initial de la sidebar
(présence ou absence de hidden).
|
Sidebar.showSidebarCompact(sidebar) |
Bascule tous les .sidebar-item de
.hide vers
.show. Appelée lors de l'ouverture.
|
Sidebar.hideSidebarCompact(sidebar) |
Bascule tous les .sidebar-item de
.show vers
.hide. Appelée lors de la fermeture.
|
| TOKEN | RÔLE |
|---|---|
--sidebar-compact-width |
Largeur de la sidebar en état étendu (.show) |
--sidebar-compact-width-reduce
|
Largeur de la sidebar en état réduit (.hide ou
hidden)
|
--sidebar-compact-gap |
Espacement entre l'icône et le texte dans chaque .sidebar-item
|
--sidebar-background-color |
Couleur de fond (partagée avec .sidebar et .sidebar-fixed)
|
--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 |
--sidebar-border-width |
Épaisseur de la bordure |
--sidebar-border-radius |
Rayon des coins côté intérieur |
| PRATIQUE | DÉTAIL |
|---|---|
aria-expanded |
Posé sur le bouton déclencheur. Mis à jour automatiquement par le JS à chaque toggle. |
aria-controls |
Lie le bouton à l'id de la sidebar. Initialisé
par Sidebar.init().
|
aria-labelledby |
Associe la sidebar à son bouton déclencheur si celui-ci possède un
id. Ajouté automatiquement par
Sidebar.init().
|
hidden |
Posé sur la sidebar au chargement pour indiquer l'état réduit initial. Retiré à l'ouverture, reposé à la fermeture en fin de transition. |
.sidebar-text |
Le libellé textuel est masqué via display: none
en état réduit. Les lecteurs d'écran ne le liront pas. Pensez à ajouter un
aria-label sur chaque
.sidebar-item pour garantir l'accessibilité des
boutons en mode icône seule.
|
Toujours inclure les deux spans .sidebar-icon et
.sidebar-text dans chaque
.sidebar-item. Sans
.sidebar-text, le JS ne peut pas masquer ou afficher
le libellé lors du toggle.
Ajouter un aria-label sur chaque
.sidebar-item pour les lecteurs d'écran.
En état réduit, .sidebar-text est masqué via
display: none et n'est donc pas vocalisé.
Ne pas modifier manuellement les classes .show /
.hide sur les
.sidebar-item. Ces classes sont gérées exclusivement
par Sidebar.showSidebarCompact() et
Sidebar.hideSidebarCompact().
Le mode sidebar-shift repose sur
:has() pour ajuster la marge du
body selon l'état de la sidebar.
Supporté par tous les navigateurs modernes, absent sur Firefox < 121.
Sidebar Compact · WEBDEV-UI DOCS / V1