feat: add side menu

akmalhisyammm · Nov 14, 2021 · cee32ea · cee32ea
1 parent 254512a
commit cee32ea
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 10 deletions.
diff --git 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
@@ -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
@@ -1,3 +1,5 @@
-:root {
+ion-app {
   --ion-font-family: 'Poppins', sans-serif;
+  max-width: 1200px;
+  margin: 0 auto;
 }