Bring back navigation buttons.

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