Bring back navigation buttons.

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

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;
+}

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>
+  );
+};

src/components/back-forward/index.ts

@@ -0,0 +1 @@
+export { Back, Forward } from './BackForward';

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);