Back/Forward buttons

src/App.tsx

@@ -34,6 +34,8 @@ import { MapScope } from './components/map/types';
 import { debounce } from 'lodash';
 import GetLocation from './components/buttons/GetLocation';
 import { geoPoint } from './components/map/types';
+import Back from './components/buttons/Back';
+import Forward from './components/buttons/Forward';
 
 setupIonicReact();
 
@@ -73,7 +75,10 @@ const App: React.FC = () => {
       </IonContent>
       <IonHeader className='ion-no-border' translucent={true}>
         <IonToolbar>
-          <IonButtons slot='start'></IonButtons>
+          <IonButtons slot='start'>
+            <Back />
+            <Forward />
+          </IonButtons>
           <IonButtons slot='end'></IonButtons>
         </IonToolbar>
       </IonHeader>

src/components/buttons/Back.tsx

@@ -0,0 +1,26 @@
+import react from 'react';
+import { IonButton, IonIcon } from '@ionic/react';
+import { arrowBackCircleOutline } from 'ionicons/icons';
+import './BackForward.css';
+
+export interface BackProperties {}
+
+export const Back: react.FC<BackProperties> = (props: BackProperties) => {
+  const onClickHandler = (event: any) => {
+    window.history.back();
+  };
+
+  return (
+    <IonButton
+      onClick={onClickHandler}
+      size='large'
+      className='back-forward'
+      shape='round'
+      fill='solid'
+    >
+      <IonIcon slot='icon-only' icon={arrowBackCircleOutline} />
+    </IonButton>
+  );
+};
+
+export default Back;

src/components/buttons/BackForward.css

@@ -0,0 +1,5 @@
+ion-button.back-forward {
+  --opacity: 0.6;
+  --ion-background-color: white;
+  --ionicon-stroke-width: 48px;
+}

src/components/buttons/Forward.tsx

@@ -0,0 +1,26 @@
+import react from 'react';
+import { IonButton, IonIcon } from '@ionic/react';
+import { arrowForwardCircleOutline } from 'ionicons/icons';
+import './BackForward.css';
+
+export interface ForwardProperties {}
+
+export const Forward: react.FC<ForwardProperties> = (props: ForwardProperties) => {
+  const onClickHandler = (event: any) => {
+    window.history.forward();
+  };
+
+  return (
+    <IonButton
+      onClick={onClickHandler}
+      size='large'
+      className='back-forward'
+      shape='round'
+      fill='solid'
+    >
+      <IonIcon slot='icon-only' icon={arrowForwardCircleOutline} />
+    </IonButton>
+  );
+};
+
+export default Forward;