Créez des barres latérales pliables en utilisant uniquement CSS

En travaillant sur un projet NextJS, je suis tombé sur une situation où je voulais que mon composant de barre latérale soit pliable. À première vue, cela semblait simple et facilement réalisable en utilisant des hooks de réaction tels que useState pour maintenir l'état de bascule.
Mais utiliser des hooks m'aurait obligé à rendre mon composant côté client, ce que je ne voulais pas.
J'ai donc erré dans la mer d'Internet à la recherche de solutions possibles à mon problème, et j'ai découvert une porte dérobée pour obtenir le résultat souhaité et c'était ainsi... roulement de tambour.... cases à cocher, oui vous lisez-le bien, les cases à cocher agiraient comme un basculeur.
Nous pouvons utiliser les cases à cocher cochées pour activer notre barre latérale précieuse, petite, rendue par le serveur.
Laissant tout cela de côté, passons tout de suite au code.
Notez que j'utiliserai tailwind css pour le style.
D'accord, commençons par configurer un code passe-partout pour notre application, nous voulons une barre latérale et une section de tableau de bord principal. Nous pouvons y parvenir en utilisant le code ci-dessous

<main class="grid grid-cols-[auto_1fr] min-h-screen">
  <nav class="min-h-screen w-64 bg-red-500">
    <ul class="p-8">
      <li>Element 1</li>
      <li>Element 2</li>
      <li>Element 3</li>
      <li>Element 4</li>
    </ul>
  </nav>
  {/* Main Content */}
  <section class="px-8 py-12">
    Hello, dev!
  </section>
</main>

Maintenant que notre passe-partout est prêt, nous arrivons maintenant à la partie principale, c'est-à-dire ajouter un bouton pour basculer cette barre latérale. Pour cela, nous devrons ajouter une case à cocher avec une étiquette comme icône de bascule, disons hamburger. Nous masquerons cette case à cocher car elle aura l'air moche et conserverons simplement l'étiquette pour la cocher/décocher.

<main ...>
  <div>
    <input type="checkbox" id="toggler" class="hidden"/>
    <label for="toggler" class="fixed top-1 left-4 z-50 cursor-pointer">
      &#9776;
    </label>
  </div>
  <nav ...>
...

Cool, nous avons notre case à cocher. Nous devons simplement connecter quelques fils pour pouvoir masquer notre menu lorsque la case n'est pas cochée et lorsqu'elle est cochée, afficher ce menu.
Nous pouvons y parvenir en utilisant la pseudo-classe checked.
D'accord, j'ai compris votre indice, pas de conneries, nous savons tout ça, montre-moi juste le code.., ouais, attends mon milkshake

<main ...>
  <div>
    <input type="checkbox" id="toggler" class="hidden peer"/>
    <label for="toggler" class="fixed top-1 left-4 z-50 cursor-pointer">
    <nav class="min-h-screen w-64 bg-red-500 fixed z-40 hidden peer-checked:block">
...

Oui, c'était tout ce dont vous aviez besoin pour obtenir un comportement pliable.
Que voulez-vous de meilleurs styles pour pouvoir l'utiliser directement ?
Je te soutiens, c'est parti

<main class="grid grid-cols-[auto_1fr] min-h-screen">
  <input type="checkbox" id="toggler" class="hidden peer"/>

  <label for="toggler" class="fixed top-1 left-4 z-50 cursor-pointer peer-checked:hidden">
    &#9776;
  </label>
  <label for="toggler" class="fixed top-1 left-4 z-50 cursor-pointer hidden peer-checked:inline">
    X
  </label>

  <!-- overlay -->
  <div class="fixed inset-0 bg-black opacity-50 peer-checked:block hidden" />

  <nav class="min-h-screen w-64 bg-red-500 fixed z-40 transition-transform -translate-x-full peer-checked:translate-x-0">
    <ul class="p-8">
      <li>Element 1</li>
      <li>Element 2</li>
      <li>Element 3</li>
      <li>Element 4</li>
    </ul>
  </nav>

  <section class="px-8 py-12">
    Hello, collapsible sidebar is made just using CSS
  </section>
</main>

Essayez-le ici

J'espère avoir été utile, consultez mon portfolio de développement ici.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!