😎

tailwindcssを使ってレスポンシブサイドバーを作る

に公開
Tailwind CSS
tech

tailwindcssを使ってレスポンシブサイズに応じてサイドバーの表示・非表示を切り替える。
利用するのはtranslate-xおよびレスポンシブブレイクポイント。
https://tailwindcss.com/docs/translate#responsive-design

  • ①スマホ表示(デフォルト表示)の場合はサブメニュー非表示

    -translate-x-fullでサブメニューを-x軸報告に表示

  • ②PC表示(lg:)の場合はサブメニュー表示

    lg:translate-x-0で、PC表示の場合にサブメニューに表示

  • ③PC表示(xl:)の場合はサブメニュー幅を広く表示する

    lg:w-72 xl:w-80で、lg時のサブメニュー幅をw-72にxl時のサブメニュー幅をw-80に変更

  • ④サイズ変更時にtraisitionするようにする。

<div>
  <div class="transition-transform duration-300 ease-linear transform -translate-x-full lg:translate-x-0 box-border fixed left-0 top-14 block p-6 w-72 h-full bg-gray-500 border-r border-r-gray-700 lg:w-72 xl:w-80">
    <div>Sidebar</div>
    <div>Sidebar</div>
    <div>Sidebar</div>
    <div>Sidebar</div>
  </div>
</div>

Discussion