【React】Material UIを使ってHambergerメニューとDrawerを実装する方法を解説

React(Next)でMaterial UI(MUI)を使ってDrawerメニューを実装する方法を解説します。

例としてスマホのUIでよくあるHambergerメニューを押すとDrawerメニューが表示される機能を実装していきます。

Material UIをインストール

まずは、Material UIをインストールしましょう。

v4

// npm
npm install @material-ui/core

// yarn
yarn add @material-ui/core

v5

// styled-components の場合
// npm
npm install @mui/material @mui/styled-engine-sc styled-components

// yarn
yarn add @mui/material @mui/styled-engine-sc styled-components

// emotion の場合
// npm
npm install @mui/material @emotion/react @emotion/styled

// yarn
yarn add @mui/material @emotion/react @emotion/styled

HamburgerメニューとDrawerの実装

続いて具体的な実装を解説していきます。

...
// v4
import Drawer from '@material-ui/core/Drawer';

// v5
import Drawer from '@mui/material/Drawer';

const Header = () => {
  // drawerがopenしているかどうかのstate
  const [drawerOpened, setDrawerOpened] = useState(false);

  return (
    <header>
      <img 
        src="hamburger.svg" 
        onClick={() => setDrawerOpened(true)}
      />
      <Drawer
        anchor={'right'}
        open={drawerOpened}
        onClose={() => setDrawerOpened(false)}>
        <DrawerMenu />
      </Drawer>
    </header>
  )
}

これでシンプルなHamburgerメニューとDrawerの実装ができます。

Drawerのよくあるケースを解説

最後にDrawer実装のよくあるケースを1つ解説します。

Drawerを全画面表示

<Drawer
  anchor={'right'}
  open={drawerOpened}
  onClose={() => setDrawerOpened(false)}
  PaperProps={{ style: { width: '100%' } }}
>
  <DrawerMenu />
</Drawer>

PagerPropsにstyleを渡すことで実現できます。

PagerPropsのドキュメントはこちらを参照してください。

まとめ

React(Next)でMaterial UI(MUI)を使ってDrawerメニューを実装する方法を解説しました。