【React】Onsen UIでサイドバーメニューを実装する方法

今回は Onsen UI でアプリにサイドバーメニューを実装する方法についてです。

利用したのは <Splitter>、<SplitterContent>、<SplitterSide> のコンポーネントです。
公式のサンプルコードがちょっとわかりにくいと感じ、実装する際にハマったので自分のための備忘録も兼ねてまとめ。

公式のドキュメントはこちらから。

Splitter React Component – Onsen UI Framework – Onsen UI
https://ja.onsen.io/v2/api/react/Splitter.html

実装方法は下記のとおりです。

import React, { Component } from 'react';
import { List, ListItem, Page, Toolbar, ToolbarButton, Splitter, SplitterSide, SplitterContent } from 'react-onsenui';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faBars } from '@fortawesome/free-solid-svg-icons';
import 'onsenui/css/onsenui.css';
import 'onsenui/css/onsen-css-components.css';

class MenuPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isShowMenu: false,
    };
    this.toggleMenuShow = this.toggleMenuShow.bind(this);
  }
  toggleMenuShow() {
    this.setState({ isShowMenu: !this.state.isShowMenu });
  }
  render() {
    return (
      <div>
        <Splitter>
          <SplitterContent>
            <Page renderToolbar={() =>
              <Toolbar>
                <div className="left">
                  <ToolbarButton onClick={this.toggleMenuShow}>
                    <FontAwesomeIcon icon={faBars} />
                  </ToolbarButton>
                </div>
                <div className="center">
                  Title
                </div>
              </Toolbar>}>
              <p>ページA</p>
            </Page>
          </SplitterContent>
          <SplitterSide
            side="left"
            width={200}
            collapse="collapse"
            isOpen={this.state.isShowMenu}
            swipeable={true}>
            <Page>
              <List>
                <ListItem>ページA</ListItem>
                <ListItem>ページB</ListItem>
                <ListItem>ページC</ListItem>
              </List>
            </Page>
          </SplitterSide>
        </Splitter>
      </div>

    );
  }
}
export default MenuPage;

まず、<Splitter> タグでページ全体を囲みます。
で、<SplitterContent> タグ内で、表示したいページレイアウトを記載します。
上記のコードでは、左端にハンバーガーメニューのアイコンボタンがあるヘッダーと、「ページA」という文字を表示させています。
そして、<SplitterSide> タグ内に、サイドバーメニューのレイアウトを記載します。
今回は「ページA」「ページB」「ページC」というテキストをリスト表示しています。

レイアウト的には上記のみでOKですが、ヘッダーのハンバーガーメニューアイコンをタップしてサイドバーメニューを開きたいので、toggleMenuShow() という関数と、isShowMenu という state を宣言しています。
toggleMenuShow() が実行されるたびに、isShowMenu の true/false が切り替わるというシンプルなプログラムです。
で、isShowMenu を <SplitterSide> の isOpen に指定しているので、ハンバーガーメニューアイコンをクリックするたびに、サイドバーメニューの表示/非表示が切り替わるようになっています。

と、ここまでは分かったのですが、ハマったのが <SplitterSide> の collapse というオプションです。
上記コードだと、41行目に記述しています。
Optional と書いてあったので、最初は collapse の指定を省略していたのですが、どうやらこれが指定されていないと、常にサイドバーメニューが表示されっぱなしで、かつ非表示にもできない状態に陥りました。
サンプルコードを見比べて、もしかして…とこの collapse を追加したところ、isOpen の値に応じて表示/非表示が切り替わるようになりました！

以上、Onsen UI のサイドバーメニューの実装方法と、正常に動作しない場合の対処法でした。
いや…気づかないって、こんなの…。
ということで、同じように苦しむ方が出ないように、簡単にではありますがまとめてみました。
参考になれば幸いです。