From 925174db7966a78a420c5e8682df506e763b232b Mon Sep 17 00:00:00 2001
From: evlist <vdv@dyomedea.com>
Date: Wed, 2 Nov 2022 16:04:18 +0100
Subject: [PATCH] Back/Forward buttons

---
 src/App.tsx                            |  7 ++++++-
 src/components/buttons/Back.tsx        | 26 ++++++++++++++++++++++++++
 src/components/buttons/BackForward.css |  5 +++++
 src/components/buttons/Forward.tsx     | 26 ++++++++++++++++++++++++++
 4 files changed, 63 insertions(+), 1 deletion(-)
 create mode 100644 src/components/buttons/Back.tsx
 create mode 100644 src/components/buttons/BackForward.css
 create mode 100644 src/components/buttons/Forward.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 7fde6c1..ac48aa7 100644
--- a/src/App.tsx
+++ b/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>
diff --git a/src/components/buttons/Back.tsx b/src/components/buttons/Back.tsx
new file mode 100644
index 0000000..0d8cf03
--- /dev/null
+++ b/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;
diff --git a/src/components/buttons/BackForward.css b/src/components/buttons/BackForward.css
new file mode 100644
index 0000000..045043c
--- /dev/null
+++ b/src/components/buttons/BackForward.css
@@ -0,0 +1,5 @@
+ion-button.back-forward {
+  --opacity: 0.6;
+  --ion-background-color: white;
+  --ionicon-stroke-width: 48px;
+}
diff --git a/src/components/buttons/Forward.tsx b/src/components/buttons/Forward.tsx
new file mode 100644
index 0000000..ea4f453
--- /dev/null
+++ b/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;