update,

03_source/mobile/src/pages/DemoReactOverlayHooks/index.tsx

@@ -0,0 +1,62 @@
+import {
+  IonIcon,
+  IonLabel,
+  IonRouterOutlet,
+  IonSplitPane,
+  IonTabBar,
+  IonTabButton,
+  IonTabs,
+} from '@ionic/react';
+
+import { cloudOutline, searchOutline } from 'ionicons/icons';
+import { Route, Redirect } from 'react-router';
+import Menu from './components/Menu';
+
+import All from './AppPages/All';
+import ActionSheet from './AppPages/ActionSheet';
+import Alert from './AppPages/Alert';
+import Loading from './AppPages/Loading';
+import Modal from './AppPages/Modal';
+import Picker from './AppPages/Picker';
+import Popover from './AppPages/Popover';
+import Toast from './AppPages/Toast';
+import './style.scss';
+
+function DemoReactOverlayHooks() {
+  const pages = [
+    { label: 'All', url: '/overlay/all', component: All },
+    { label: 'Action Sheet', url: '/overlay/action-sheet', component: ActionSheet },
+    { label: 'Alert', url: '/overlay/alert', component: Alert },
+    { label: 'Loading', url: '/overlay/loading', component: Loading },
+    { label: 'Modal', url: '/overlay/modal', component: Modal },
+    { label: 'Picker', url: '/overlay/picker', component: Picker },
+    { label: 'Popover', url: '/overlay/popover', component: Popover },
+    { label: 'Toast', url: '/overlay/toast', component: Toast },
+  ];
+
+  return (
+    <IonSplitPane contentId="main">
+      <Menu pages={pages} />
+      <IonRouterOutlet id="main">
+        <Route path="/demo-react-overlay-hooks" exact={true}>
+          <Redirect to="/demo-react-overlay-hooks/overlay/all" />
+        </Route>
+
+        {pages.map((page, index) => {
+          const pageComponent = page.component;
+
+          return (
+            <Route
+              key={index}
+              path={`/demo-react-overlay-hooks${page.url}`}
+              exact={true}
+              component={pageComponent}
+            />
+          );
+        })}
+      </IonRouterOutlet>
+    </IonSplitPane>
+  );
+}
+
+export default DemoReactOverlayHooks;