ionic react menu

click sandwich button, menu slides in from right

click any item in menu, menu closes.

//tab3.tsx

import React, { useState } from 'react';
import {
  IonContent, IonHeader, IonPage, IonTitle, IonToolbar,
  IonAlert, IonButton, IonCard, IonCardHeader,
  IonCardSubtitle, IonCardTitle, IonCardContent,
  IonItem, IonIcon, IonLabel, IonBadge, IonList,
  IonItemDivider, IonCheckbox, IonFab, IonFabButton,
  IonFabList, IonItemGroup, IonItemSliding,
  IonItemOptions, IonItemOption, IonNote, IonMenu,
  IonRouterOutlet, IonListHeader, IonMenuToggle,
  IonButtons, IonMenuButton, IonInput, IonSplitPane
} from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import './Tab3.css';

const Tab3: React.FC = () => {
  const [text, setText] = useState<string>();
  const [number, setNumber] = useState<number>();
  const [path, setPath] = useState<string>()

  return (
    <IonContent>
      <IonSplitPane contentId="content1">
        <IonMenu contentId="content1" menuId='menu1' type="overlay" side='end'>
          <IonHeader>
            <IonToolbar>
              <IonTitle>Menu</IonTitle>
            </IonToolbar>
          </IonHeader>
          <IonContent>
            <IonList>
              <IonMenuToggle>
                <IonItem button onClick={() => console.log('item 1')}>Menu Item 1</IonItem>
              </IonMenuToggle>
              <IonMenuToggle>
                <IonItem button onClick={() => console.log('item 2')}>Menu Item 2</IonItem>
              </IonMenuToggle>
              <IonMenuToggle>
                <IonItem button onClick={() => console.log('item 3')}>Menu Item 3</IonItem>
              </IonMenuToggle>
            </IonList>

          </IonContent>
        </IonMenu>

        <IonRouterOutlet id="content1"></IonRouterOutlet>

        <IonPage>
          <IonHeader>
            <IonToolbar color='secondary'>
              <IonButtons slot="start">
                <IonMenuButton />
              </IonButtons>
              <IonTitle>Form</IonTitle>
            </IonToolbar>
          </IonHeader>

          <IonContent>
            <form action='http://ptsv2.com/t/wq6e8-1586646697/post' method='post'
              encType='multipart/form-data'>

              <IonList>

                <IonItem>
                  <IonLabel position="stacked">Text</IonLabel>
                  <IonInput value={text} placeholder="Text" name='text'
                    onIonChange={e => setText(e.detail.value!)} clearInput></IonInput>
                </IonItem>

                <IonItem>
                  <IonLabel position="stacked">Number</IonLabel>
                  <IonInput type="number" value={number} placeholder="Number" name='num'
                    onIonChange={e => {
                      const n = parseFloat(e.detail.value!)
                      isNaN(n) ? setNumber(1) : setNumber(n)
                      console.log(number)
                    }}></IonInput>
                </IonItem>

                <IonItem>
                  <IonLabel position="stacked">Picture {path}</IonLabel>
                  <input type="file" name='pic' id="pic"
                    onChange={e => setPath(e.target.value)}
                    style={{ marginTop: 10, marginBottom: 10 }} />
                </IonItem>

                <IonItem>
                  <IonButton type='submit'>Submit</IonButton>
                </IonItem>

              </IonList>
            </form>
          </IonContent>
        </IonPage >
      </IonSplitPane>
    </IonContent>

  );
};

export default Tab3;

reference:
Menu: must have a "content" element to listen for drag events on.
https://stackoverflow.com/questions/53657275/ionic-4-adding-side-menu/53661227

<IonSplitPane>
If the device's screen width is below a certain size, the split pane will collapse and the menu will be hidden. This is ideal for creating an app that will be served in a browser and deployed through the app store to phones and tablets.