Material-UIのDrawerをこれ以上なくシンプルに使ってみる

サークルサイトを更新した際に、ReactのUIフレームワークであるMaterial-UIを使ってモバイル表示用にサイドバーをドロワー化して開閉できるようにしました。

公式サンプルは機能を十全にアピールするためにかなり複雑だったので、最低限のコードで済むようにシンプルな実装にしたものを備忘録として公開しておきます。

主な実装ファイルはこちら

React Hooksを利用して開閉状態を保持する

まずいきなりReact Hooksの知識が必要となります（Hooksについてはググってください）

const Sidebar: React.FC<HeaderProps> = ({ title }) => {
  const [drawerState, setDrawerState] = React.useState(false)

  const toggleDrawer = () => {
    setDrawerState(!drawerState)
  }

//後略

公式サンプルでは4つのドロワーを一度に表示しているのでドロワーの状態を4つ配列にしていますが、今回は1つでいいのでdrawerStateを開閉状態として定義します。初期値（アクセス時）は閉じていてほしいので初期値はfalseです。

toggleDrawer関数はメニューボタンクリック時やドロワーを閉じる際に起動する関数で、drawerStateを切り替えるだけのものです。

ドロワー本体を実装する

       <TitleGrid item sm={12} xs={12}>
          {/* モバイルドロワー部分開始 */}
          <Hidden smUp>
            <MenuButtonBox>
              <IconButton color="inherit" style={{ padding: 0 }}>
                <MenuOpen
                  fontSize="large"
                  aria-label="open drawer"
                  onClick={toggleDrawer}
                />
              </IconButton>
            </MenuButtonBox>
            <Drawer
              anchor="left"
              elevation={16}
              open={drawerState}
              onClose={toggleDrawer}
            >
              <DrawerGrid
                container
                onClick={toggleDrawer}
                onKeyDown={toggleDrawer}
              >
                <DrawerInnerGrid item alignItems="center" xs={12}>
                  <Externals />
                </DrawerInnerGrid>
                <DrawerInnerGrid item alignItems="center" xs={12}>
                  <Bio />
                </DrawerInnerGrid>
              </DrawerGrid>
            </Drawer>
          </Hidden>
          {/* モバイルドロワーここまで */}

モバイルアクセス時のみドロワーを使うので、ドロワー部分は<hidden>で囲みサイズに応じた表示属性を付与しておきます。

メニューボタンのonClick属性にtoggleDrawer関数を起動するよう設定して、<Drawer>のopenにdrawerStateを指定することでdrawerStateによってドロワーの開閉が制御されるようになります。

あとはサンプルと同様にonClose,onKeyDown属性に状態変更の関数を指定しておくと、ドロワーのリンク以外の場所をクリックすればtoggleDrawerが起動して状態を変更、ドロワーが閉じるようになります。

ドロワーそのもののコンポーネントは自由に指定できます。