ハンバーガーメニューの実装さいごにはじめにこの記事の概要こんにちは、株式会社TOKOSのスギタです!今回はtailwindcssを用いてUIライブラリMantineを使いハンバーガーメニューを作成する方法を説明していきたいと思います。1.11.8下記参照内でフレームワークを選択してください。今回の完成予定は下記になります。ハンバーガーメニューの実装まずはメニューボタンから作成します。メニューボタンですが、MantineUIから、Burgerコンポーネントを使用します。propsのcolorで色の指定をしています。状態管理をしていないので、現状は動かないと思います。ここから状態管理を追加して、メニューを押した際のアニメーションを追加していきたいと思います。propsのopenedをtrueに変えるとバツになると思います。propsのopenedが表示状態の管理をしていることがわかったと思います。propsのonClickで押した際の動作を追記していきます。今回は複数のコンポーネントの状態管理をuseDisclosureというMantineのCustomHooksを使用していきます。</header>}BurgerコンポーネントのonClickにuseDisclosureのtoggle関数(hamburgerToggle)を渡します。openedに動作した関数によって切り替わった真偽値を渡すようにします。CustomHooksのuseDisclosureですが公式ドキュメントを見ると、真偽値の管理、open、close、toggleのハンドラーとonOpenとonCloseのコールバックがあります。handlers.toggle();}今回は、押した時にtoggle関数(hamburgerToggle)を使用して、真偽値の反転をしています。初期値はメニューが閉じた状態にしたいので、falseにしています。これで、メニューボタンの実装は完了です。次にMantineUiのDrawerコンポーネントを使用して、メニューの実装をします。</header>}まずはDrawerコンポーネントをMantine/coreから呼び出します。propsのzIndexを0にします。propsのclaseNamesでデフォルトのpaddingを消し、メニューの幅を指定しています。コンポーネントのデフォルトのcssを全て無くしたい場合デフォルトで当たっているcssを全て無くしたい場合はpropsでunstyledを渡すとデフォルトのcssはなくなります。ここから、開く処理と閉じる処理を追記します。</header>}useDisclosureにcloseハンドラーの追記とopenedに管理されている真偽値を渡し、Drawerが閉じる際に発火する関数としてuseDisclosureのcloseハンドラーを渡します。することにより、メニューが開く際にisHamburgerOpenedがtrue、メニューが閉じた際にisHamburgerOpenedがfalseにという切り替えが可能になります。さいごに今回はMantineのHamburgerコンポーネントとDrawerコンポーネントそして、CustomHooksのuseDisclosureを使用しました。簡単に実装できるかなと思いました。スクラッチで書こうとすると、overlayの箇所の動作や細かいアニメーションを考えるとかなり大変なので、こういう実装はUIライブラリに頼るのも手なのかなと感じます。