From cee32eaa56a73f367b28dffdbdbd5edc0bd86f7e Mon Sep 17 00:00:00 2001
From: Muhammad Akmal Hisyam <muhammad.akmal@student.umn.ac.id>
Date: Sun, 14 Nov 2021 21:47:23 +0700
Subject: [PATCH] feat: add side menu

---
 src/App.tsx                 | 22 ++++++++++++--------
 src/components/SideMenu.tsx | 41 +++++++++++++++++++++++++++++++++++++
 src/theme/customTheme.css   |  4 +++-
 3 files changed, 57 insertions(+), 10 deletions(-)
 create mode 100644 src/components/SideMenu.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 4b4b0c6..288b9e5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,4 @@
-import { IonApp, IonRouterOutlet } from '@ionic/react';
+import { IonApp, IonRouterOutlet, IonSplitPane } from '@ionic/react';
 import { IonReactRouter } from '@ionic/react-router';
 import { Route } from 'react-router-dom';
 
@@ -9,6 +9,7 @@ import About from 'pages/About';
 import EditProfile from 'pages/main/profile/EditProfile';
 
 import MainTabs from 'components/MainTabs';
+import SideMenu from 'components/SideMenu';
 
 /* Core CSS required for Ionic components to work properly */
 import '@ionic/react/css/core.css';
@@ -33,14 +34,17 @@ import 'theme/customTheme.css';
 const App: React.FC = () => (
   <IonApp>
     <IonReactRouter>
-      <IonRouterOutlet>
-        <Route exact path="/" component={Landing} />
-        <Route path="/login" component={Login} />
-        <Route path="/register" component={Register} />
-        <Route path="/about" component={About} />
-        <Route path="/edit-profile" component={EditProfile} />
-        <Route path="/main" component={MainTabs} />
-      </IonRouterOutlet>
+      <IonSplitPane contentId="main">
+        <SideMenu />
+        <IonRouterOutlet id="main">
+          <Route exact path="/" component={Landing} />
+          <Route path="/login" component={Login} />
+          <Route path="/register" component={Register} />
+          <Route path="/about" component={About} />
+          <Route path="/edit-profile" component={EditProfile} />
+          <Route path="/main" component={MainTabs} />
+        </IonRouterOutlet>
+      </IonSplitPane>
     </IonReactRouter>
   </IonApp>
 );
diff --git a/src/components/SideMenu.tsx b/src/components/SideMenu.tsx
new file mode 100644
index 0000000..dc3b825
--- /dev/null
+++ b/src/components/SideMenu.tsx
@@ -0,0 +1,41 @@
+import {
+  IonMenu,
+  IonHeader,
+  IonToolbar,
+  IonTitle,
+  IonContent,
+  IonList,
+  IonMenuToggle,
+  IonItem,
+  IonIcon,
+  IonLabel,
+} from '@ionic/react';
+import { informationCircle } from 'ionicons/icons';
+
+const SideMenu: React.FC = () => {
+  return (
+    <IonMenu contentId="main">
+      <IonHeader>
+        <IonToolbar color="secondary">
+          <IonTitle>KlikDarurat</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent>
+        <IonList>
+          <IonMenuToggle autoHide={false}>
+            <IonItem button routerLink="/about">
+              <IonIcon
+                slot="start"
+                color="secondary"
+                icon={informationCircle}
+              />
+              <IonLabel>Tentang</IonLabel>
+            </IonItem>
+          </IonMenuToggle>
+        </IonList>
+      </IonContent>
+    </IonMenu>
+  );
+};
+
+export default SideMenu;
diff --git a/src/theme/customTheme.css b/src/theme/customTheme.css
index 4d4fe5f..3e2eada 100644
--- a/src/theme/customTheme.css
+++ b/src/theme/customTheme.css
@@ -1,3 +1,5 @@
-:root {
+ion-app {
   --ion-font-family: 'Poppins', sans-serif;
+  max-width: 1200px;
+  margin: 0 auto;
 }