CSS だけを使用して折りたたみ可能なサイドバーを作成する

NextJS プロジェクトで作業しているときに、サイドバー コンポーネントを折りたたみ可能にしたい状況に遭遇しました。一見すると、トグル状態を維持するために useState などの反応フックを使用することで、シンプルで簡単に実行できるように見えました。
しかし、フックを使用すると、コンポーネントをクライアント側にする必要がありましたが、これは私が望んでいなかったものです。
そこで私は問題の解決策を探してインターネットの海に迷い込み、望む結果を達成するためのバックドアを見つけました。その方法は....ドラムロール....チェックボックス、はい、あなたです正しく読んでください。チェックボックスはトグルとして機能します。
チェックボックスのオン状態を使用して、貴重で小さなサーバーレンダリング サイド バーを切り替えることができます。
以上のことはさておき、すぐにコードに進みましょう。
スタイリングには tailwind CSS を使用することに注意してください。
さて、それではまずアプリの定型コードをセットアップしましょう。サイドバーとメインのダッシュボードセクションが必要です。以下のコードを使用してこれを実現できます

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

定型文の準備ができたので、メイン部分、つまりサイドバーを切り替えるボタンを追加します。そのためには、ハンバーガー などのトグルアイコンとしてラベルが付いたチェックボックスを追加する必要があります。このチェックボックスは見苦しくなるため非表示にし、ラベルをオン/オフにするだけにしておきます。

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

いいですね、チェックボックスができました。チェックボックスがオフの場合はメニューを非表示にし、チェックボックスがオンの場合はそのメニューを表示できるように、いくつかのワイヤを接続するだけです。
checked 擬似クラスを使用してこれを実現できます。
オーケー、ヒントは分かった、そんなことは何もわかっていない、ただコードを見せてください。、はい、ミルクシェイクを持ってください

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

はい、折りたたみ可能な動作を実現するために必要なのはこれだけです。
直接使用できるように、より良いスタイルが必要ですか?
戻ってきました、どうぞ

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

ここで試してみましょう

お役に立てば幸いです。ここで私の開発ポートフォリオをチェックしてください。

以上がCSS だけを使用して折りたたみ可能なサイドバーを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。