😎
tailwindcssを使ってレスポンシブサイドバーを作る
tailwindcssを使ってレスポンシブサイズに応じてサイドバーの表示・非表示を切り替える。
利用するのはtranslate-x
およびレスポンシブブレイクポイント。
-
①スマホ表示(デフォルト表示)の場合はサブメニュー非表示
-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