From 02f02984e58c60a080b04adcc6e12d779fcde62e Mon Sep 17 00:00:00 2001
From: evlist <vdv@dyomedea.com>
Date: Sat, 26 Nov 2022 12:33:26 +0100
Subject: [PATCH] Bring back navigation buttons.

---
 AndroidManifest.xml                           |  2 ++
 .../back-forward/BackForward.module.css       | 16 ++++++++++
 src/components/back-forward/BackForward.tsx   | 30 +++++++++++++++++++
 src/components/back-forward/index.ts          |  1 +
 src/components/map/Map.tsx                    | 17 +++++++++++
 5 files changed, 66 insertions(+)
 create mode 100644 src/components/back-forward/BackForward.module.css
 create mode 100644 src/components/back-forward/BackForward.tsx
 create mode 100644 src/components/back-forward/index.ts

diff --git a/AndroidManifest.xml b/AndroidManifest.xml
index 0cd6a76..f4eb878 100644
--- a/AndroidManifest.xml
+++ b/AndroidManifest.xml
@@ -8,6 +8,8 @@
         android:label="@string/app_name"
         android:roundIcon="@mipmap/ic_launcher_round"
         android:supportsRtl="true"
+        android:isGame="false"
+        android:appCategory="maps"
         android:theme="@style/AppTheme">
 
         <activity
diff --git a/src/components/back-forward/BackForward.module.css b/src/components/back-forward/BackForward.module.css
new file mode 100644
index 0000000..9339489
--- /dev/null
+++ b/src/components/back-forward/BackForward.module.css
@@ -0,0 +1,16 @@
+.common {
+  --opacity: 0.6;
+  --ion-background-color: white;
+  position: fixed !important;
+  top: 6px;
+}
+
+.back {
+  composes: common;
+  margin-left: 6px !important;
+}
+
+.forward {
+  composes: common;
+  margin-left: 40px !important;
+}
diff --git a/src/components/back-forward/BackForward.tsx b/src/components/back-forward/BackForward.tsx
new file mode 100644
index 0000000..c452040
--- /dev/null
+++ b/src/components/back-forward/BackForward.tsx
@@ -0,0 +1,30 @@
+import { Component, createEffect, createSignal } from 'solid-js';
+import { IconButton } from '@suid/material';
+
+import ArrowBackIcon from '@suid/icons-material/ArrowBack';
+import ArrowForwardIcon from '@suid/icons-material/ArrowForward';
+import styles from './BackForward.module.css';
+
+export const Back: Component = () => {
+  const onClickHandler = (event: any) => {
+    window.history.back();
+  };
+
+  return (
+    <IconButton onClick={onClickHandler} class={styles.back}>
+      <ArrowBackIcon />
+    </IconButton>
+  );
+};
+
+export const Forward: Component = () => {
+  const onClickHandler = (event: any) => {
+    window.history.forward();
+  };
+
+  return (
+    <IconButton onClick={onClickHandler} class={styles.forward}>
+      <ArrowForwardIcon />
+    </IconButton>
+  );
+};
diff --git a/src/components/back-forward/index.ts b/src/components/back-forward/index.ts
new file mode 100644
index 0000000..29b6df3
--- /dev/null
+++ b/src/components/back-forward/index.ts
@@ -0,0 +1 @@
+export { Back, Forward } from './BackForward';
diff --git a/src/components/map/Map.tsx b/src/components/map/Map.tsx
index 39be826..7e55c9b 100644
--- a/src/components/map/Map.tsx
+++ b/src/components/map/Map.tsx
@@ -20,6 +20,7 @@ import { Point } from 'ol/geom';
 import { Circle, Fill, Stroke, Style, Icon } from 'ol/style';
 import GetLocation, { getCurrentLocation } from '../get-location';
 import ShowLocationIcon from '../get-location/ShowLocationIcon.svg';
+import { Back, Forward } from '../back-forward';
 
 const [getState, setState] = createSignal({
   lon: 0,
@@ -144,6 +145,22 @@ const Map: Component = () => {
             </div>
           ),
         }),
+        new Control({
+          // @ts-ignore
+          element: (
+            <div>
+              <Back />
+            </div>
+          ),
+        }),
+        new Control({
+          // @ts-ignore
+          element: (
+            <div>
+              <Forward />
+            </div>
+          ),
+        }),
       ]),
     });
     olMap.on(['moveend'], changeListener);