add NavigationButton component, use in settings

src/View/Components/navigationButton.tsx

@@ -0,0 +1,29 @@
+import * as React from "bloatless-react";
+import CoreViewModel from "../../ViewModel/Global/coreViewModel";
+
+export function NavigationButton<T>(
+    coreViewModel: CoreViewModel,
+    label: string,
+    navigationState: React.State<T | undefined>,
+    page: T,
+    arrowMobileOnly?: boolean,
+) {
+    const isSelected = React.createProxyState(
+        [navigationState],
+        () => navigationState.value == page,
+    );
+
+    function open() {
+        navigationState.value = page;
+    }
+
+    const iconClass = `icon ${arrowMobileOnly == true ? "mobile-only" : ""}`;
+
+    return (
+        <button toggle:selected={isSelected} on:click={open}>
+            {label}
+
+            <span class={iconClass}>arrow_forward</span>
+        </button>
+    );
+}

src/View/Components/splitModal.css

@@ -34,7 +34,7 @@
 }
 
 .split-modal[navigation] > div,
-.split-modal[navigation] > div > .scroll-area{
+.split-modal[navigation] > div > .scroll-area {
     justify-content: start;
 }