Bina bar sisi boleh lipat menggunakan hanya CSS

Semasa mengerjakan projek NextJS, saya terjumpa situasi di mana saya mahu komponen bar sisi saya boleh dilipat. Pada pandangan pertama ia kelihatan ringkas dan mudah dilakukan menggunakan cangkuk tindak balas seperti useState untuk mengekalkan keadaan togol.
Tetapi menggunakan cangkuk akan memaksa saya untuk membuat bahagian pelanggan komponen saya, yang saya tidak mahu.
Jadi saya mengembara ke lautan internet mencari penyelesaian yang mungkin untuk masalah saya, dan mendapati pintu belakang untuk mencapai hasil yang saya inginkan dan cara itu ialah .... drum roll .... Kotak semak, Ya anda baca betul-betul, kotak pilihan akan bertindak sebagai togol.
Kami boleh menggunakan keadaan kotak semak untuk menogol bar sisi berharga, kecil, pelayan diberikan kami.
Mengetepikan semua ini, mari teruskan kepada kod.
Harap maklum bahawa saya akan menggunakan css tailwind untuk penggayaan.
Okey, jadi mula-mula mari kita sediakan kod boilerplate untuk apl kita, kita mahukan bar sisi dan bahagian papan pemuka utama. Kita boleh mencapainya menggunakan kod di bawah

<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>

Sekarang kami telah menyediakan plat dandang kami, kini kami sampai ke bahagian utama iaitu untuk menambah butang untuk menogol bar sisi itu. Untuk itu kita perlu menambah kotak semak dengan label sebagai ikon togol sebut hamburger. Kami akan menyembunyikan kotak pilihan itu kerana ia akan kelihatan hodoh dan hanya simpan label untuk menyemak/menyahtandainya.

<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 ...>
...

Sejuk, kami mempunyai kotak pilihan kami. Kami hanya perlu menyambung beberapa wayar supaya kami boleh menyembunyikan menu kami apabila kotak pilihan dinyahtanda dan apabila ditanda tunjukkan menu itu.
Kita boleh mencapainya menggunakan kelas pseudo ditanda.
Okay, saya faham, tak apa kita tahu semua ini, cuma tunjukkan kodnya.., ya pegang milkshake saya

<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">
...

Ya, itu sahaja yang anda perlukan untuk mencapai tingkah laku boleh lipat.
Apakah gaya yang anda inginkan yang lebih baik supaya anda boleh menggunakannya terus?
Saya mendapat belakang anda, ini anda pergi

<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>

Cubalah di sini

Semoga saya dapat membantu, lihat portfolio dev saya di sini.

Atas ialah kandungan terperinci Bina bar sisi boleh lipat menggunakan hanya CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!