😊

【Next.js】Ark-uiのMenuのハンバーガーメニューボタンを押すと×にする

2024/07/09に公開

概要

Ark-uiのMenuをスマホのグローバルナビに使おうと思ったとき、
ハンバーガーメニューのボタンとなる部分が以下にしたかったのでやり方をまとめておきます。

  • メニューを開いているときは閉じるマーク(×)
  • メニューが閉じているときは三本線(三)

解決方法

data-[state=open]:hiddendata-[state=closed]:hiddenを使うとうまくいきました。

ボタン部分の実装

Ark-uiのMenuのExampleを参考に、ボタン部分だけを切り抜いて実装しました。

参考: https://ark-ui.com/react/docs/components/menu#examples

button.tsx
<Menu.Trigger>
  <Menu.Indicator className='data-[state=open]:hidden lg:hidden'></Menu.Indicator>
  <Menu.Indicator className='data-[state=closed]:hidden'>
    ×
  </Menu.Indicator>
</Menu.Trigger>

上記のように、

  1. 変えたい文言やアイコンを<Menu.Indicator>で囲います
  2. data-[state=open]:hiddenまたは、data-[state=closed]:hiddenをクラスにつけます

Menuはopenclosedの二つの状態を持っていて、
それをdata-[state=(open|closed)]で取得できるのでつけたいクラスをつけています。
それぞれの状態のときにhiddenをつけることで以下を実装しました。

  • メニューを開いているときは閉じるマーク(×)
  • メニューが閉じているときは三本線(三)

終わりに

Ark-uiを初めて実装しました。
似た実装でAnimationを付けたり、ほかのConponentでもいろいろな実装ができそうです。
ぜひ試してみてください。
また、もっと良い実装方法があればコメントしてください。

Discussion