Ionic 4 React hamburger menu

After spending more time on the official documentation site, I figured out, how to display a button for hamburger menu, and how to show/hide menu, or get menu via swipe.

App.tsx

import React from "react";
import { Redirect, Route } from "react-router-dom";
import { IonApp, IonRouterOutlet, IonSplitPane } from "@ionic/react";
import { IonReactRouter } from "@ionic/react-router";

import Home from "./pages/home/home";
import { ProtectedRoute } from "./security/protectedRoute";
import AdminHome from "./pages/admin/adminHome";
import Menu from "./pages/shared/menu/menu";

/* Core CSS required for Ionic components to work properly */
import "@ionic/react/css/core.css";

/* Basic CSS for apps built with Ionic */
import "@ionic/react/css/normalize.css";
import "@ionic/react/css/structure.css";
import "@ionic/react/css/typography.css";

/* Optional CSS utils that can be commented out */
import "@ionic/react/css/padding.css";
import "@ionic/react/css/float-elements.css";
import "@ionic/react/css/text-alignment.css";
import "@ionic/react/css/text-transformation.css";
import "@ionic/react/css/flex-utils.css";
import "@ionic/react/css/display.css";

/* Theme variables */
import "./theme/variables.css";

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
        <Menu />
        <IonRouterOutlet id="menuContent">
          <Route path="/home" component={Home} exact={true} />
          <Route exact path="/" render={() => <Redirect to="/home" />} />

          <ProtectedRoute path="/admin" component={AdminHome} />
        </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
);

export default App;

menu.tsx

import React from "react";
import {
  IonMenu,
  IonHeader,
  IonToolbar,
  IonTitle,
  IonContent,
  IonList,
  IonItem,
  IonButtons,
  IonMenuButton,
  IonIcon,
} from "@ionic/react";
import { menuController } from "@ionic/core";
import { menuOutline } from "ionicons/icons";

const Menu: React.FC = () =>
{

  const onClickHandler = (): void =>
  {
    menuController.close();
  };

  return (
    <React.Fragment>
      <IonMenu
        side="start"
        menuId="first"
        content-id="menuContent"
        swipe-gesture={true}
        disabled={false}
        maxEdgeStart={100}
        hidden={false}
        type="overlay">
        <IonHeader translucent>
          <IonToolbar color="primary">
            <IonTitle>
              <IonIcon slot="start" icon={menuOutline}></IonIcon>
            </IonTitle>
            <IonButtons slot="start">
              <IonMenuButton
                autoHide={true}
                onClick={() => onClickHandler()}
              ></IonMenuButton>
            </IonButtons>
          </IonToolbar>
        </IonHeader>
        <IonContent>
          <IonList>
            <IonItem>Menu Item</IonItem>
            <IonItem>Menu Item</IonItem>
            <IonItem>Menu Item</IonItem>
            <IonItem>Menu Item</IonItem>
            <IonItem>Menu Item</IonItem>
          </IonList>
        </IonContent>
      </IonMenu>
    </React.Fragment>
  );
};

export default Menu;

On page header add this, or icon that you like after IonToolbar tag:

<IonIcon slot="start" icon={menuOutline}
                   onClick={() => onClickHandler()}
                   size="large">

and the event handler

  const onClickHandler = () =>
  {
    menuController.open()
  }

also you need to import the menu controler

import { menuController } from "@ionic/core";