init commit,

03_source/mobile/src/components/Menu.tsx

@@ -0,0 +1,154 @@
+import React from 'react';
+import { RouteComponentProps, withRouter, useLocation } from 'react-router';
+
+import {
+  IonContent,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonListHeader,
+  IonMenu,
+  IonMenuToggle,
+  IonToggle,
+} from '@ionic/react';
+import {
+  calendarOutline,
+  hammer,
+  moonOutline,
+  help,
+  informationCircleOutline,
+  logIn,
+  logOut,
+  mapOutline,
+  peopleOutline,
+  person,
+  personAdd,
+} from 'ionicons/icons';
+
+import { connect } from '../data/connect';
+import { setDarkMode } from '../data/user/user.actions';
+
+import './Menu.css';
+
+const routes = {
+  appPages: [
+    { title: 'Schedule', path: '/tabs/schedule', icon: calendarOutline },
+    { title: 'Speakers', path: '/tabs/speakers', icon: peopleOutline },
+    { title: 'Map', path: '/tabs/map', icon: mapOutline },
+    { title: 'About', path: '/tabs/about', icon: informationCircleOutline },
+  ],
+  loggedInPages: [
+    { title: 'Account', path: '/account', icon: person },
+    { title: 'Support', path: '/support', icon: help },
+    { title: 'Logout', path: '/logout', icon: logOut },
+  ],
+  loggedOutPages: [
+    { title: 'Login', path: '/login', icon: logIn },
+    { title: 'Support', path: '/support', icon: help },
+    { title: 'Signup', path: '/signup', icon: personAdd },
+  ],
+};
+
+interface Pages {
+  title: string;
+  path: string;
+  icon: string;
+  routerDirection?: string;
+}
+interface StateProps {
+  darkMode: boolean;
+  isAuthenticated: boolean;
+  menuEnabled: boolean;
+}
+
+interface DispatchProps {
+  setDarkMode: typeof setDarkMode;
+}
+
+interface MenuProps extends RouteComponentProps, StateProps, DispatchProps {}
+
+const Menu: React.FC<MenuProps> = ({
+  darkMode,
+  history,
+  isAuthenticated,
+  setDarkMode,
+  menuEnabled,
+}) => {
+  const location = useLocation();
+
+  function renderlistItems(list: Pages[]) {
+    return list
+      .filter((route) => !!route.path)
+      .map((p) => (
+        <IonMenuToggle key={p.title} auto-hide="false">
+          <IonItem
+            detail={false}
+            routerLink={p.path}
+            routerDirection="none"
+            className={
+              location.pathname.startsWith(p.path) ? 'selected' : undefined
+            }
+          >
+            <IonIcon slot="start" icon={p.icon} />
+            <IonLabel>{p.title}</IonLabel>
+          </IonItem>
+        </IonMenuToggle>
+      ));
+  }
+
+  return (
+    <IonMenu type="overlay" disabled={!menuEnabled} contentId="main">
+      <IonContent forceOverscroll={false}>
+        <IonList lines="none">
+          <IonListHeader>Conference</IonListHeader>
+          {renderlistItems(routes.appPages)}
+        </IonList>
+        <IonList lines="none">
+          <IonListHeader>Account</IonListHeader>
+          {isAuthenticated
+            ? renderlistItems(routes.loggedInPages)
+            : renderlistItems(routes.loggedOutPages)}
+          <IonItem>
+            <IonIcon
+              slot="start"
+              icon={moonOutline}
+              aria-hidden="true"
+            ></IonIcon>
+            <IonToggle
+              checked={darkMode}
+              onClick={() => setDarkMode(!darkMode)}
+            >
+              Dark Mode
+            </IonToggle>
+          </IonItem>
+        </IonList>
+        <IonList lines="none">
+          <IonListHeader>Tutorial</IonListHeader>
+          <IonItem
+            button
+            detail={false}
+            onClick={() => {
+              history.push('/tutorial');
+            }}
+          >
+            <IonIcon slot="start" icon={hammer} />
+            <IonLabel>Show Tutorial</IonLabel>
+          </IonItem>
+        </IonList>
+      </IonContent>
+    </IonMenu>
+  );
+};
+
+export default connect<{}, StateProps, {}>({
+  mapStateToProps: (state) => ({
+    darkMode: state.user.darkMode,
+    isAuthenticated: state.user.isLoggedin,
+    menuEnabled: state.data.menuEnabled,
+  }),
+  mapDispatchToProps: {
+    setDarkMode,
+  },
+  component: withRouter(Menu),
+});