Module SIDEBAR

Définition du menu latéral

Ce module permet de créer un menu de navigation latéral structuré avec des rubriques et des liens. Il est utilisé pour naviguer entre les différentes pages de l'application.


<?php
$current_page = basename($_SERVER['PHP_SELF']);
?>
Cette variable permet de détecter la page active pour appliquer automatiquement la classe active au bon élément du menu.
Structure du menu

<nav class="sidebar">
  <ul class="sidebar-nav">

    <li class="sidebar-header">Rubrique</li>

    <li class="sidebar-item active">
      <a class="sidebar-link" href="#">
        <i class="fa-icon"></i>
        <span>Lien</span>
      </a>
    </li>

  </ul>
</nav>
Créer une rubrique

Une rubrique permet de regrouper plusieurs liens sous un même titre.


<li class="sidebar-header">
  Modules
</li>
Les rubriques servent uniquement de séparation visuelle dans le menu.
Ajouter un élément (lien)

Chaque élément correspond à une page. Il contient une icône, un texte et un lien de navigation.


<li class="sidebar-item <?= ($current_page == 'page.php') ? 'active' : '' ?>">
  <a class="sidebar-link" href="page.php">
    <i class="fa-solid fa-icon"></i>
    <span class="align-middle">Nom de la page</span>
  </a>
</li>
  • sidebar-item : élément du menu
  • active : appliqué automatiquement si page active
  • sidebar-link : lien cliquable
  • <i> : icône (Font Awesome)
L'utilisation de $current_page permet de surligner automatiquement la page en cours.
Exemple complet

<li class="sidebar-header">Modules</li>

<li class="sidebar-item <?= ($current_page == 'module-header.php') ? 'active' : '' ?>">
  <a class="sidebar-link" href="module-header.php">
    <i class="fa-solid fa-heading"></i>
    <span class="align-middle">Header</span>
  </a>
</li>
Bloc d'action (CTA)

Le bloc en bas de la sidebar permet d'ajouter une action importante (support, contact, etc.).


<div class="sidebar-cta">
  <a class="btn btn-primary">Envoyer une demande</a>
</div>
Idéal pour mettre en avant une action utilisateur importante.