Use tsx syntax in NavBar.

src/elements/NavBar.ts

@@ -1,74 +0,0 @@
-import { ListItem } from "./ListItem";
-import { PageRouter } from "z-pagerouter";
-import { makeElement } from "z-makeelement";
-import i18next from "i18next";
-
-export function NavBar(router: PageRouter): HTMLElement {
-  return makeElement({
-    id: "navBar",
-    tag: "nav",
-    class: ["uk-navbar", "uk-navbar-container"],
-    children: [
-      makeElement({
-        tag: "div",
-        class: "uk-navbar-left",
-        children: makeElement({
-          tag: "ul",
-          class: "uk-navbar-nav",
-          children: [
-            ListItem(
-              makeElement({
-                tag: "a",
-                text: i18next.t("home_btn"),
-                onclick: async () => {
-                  await router.changePage("HOME");
-                },
-              }),
-            ),
-            ListItem(
-              makeElement({
-                tag: "a",
-                text: i18next.t("back_btn"),
-                onclick: async () => {
-                  await router.goBack();
-                },
-              }),
-            ),
-            ListItem(
-              makeElement({
-                tag: "a",
-                text: i18next.t("refresh_btn"),
-                onclick: async () => {
-                  await router.refresh();
-                },
-              }),
-            ),
-          ],
-        }),
-      }),
-      makeElement({
-        tag: "div",
-        class: "uk-navbar-right",
-        children: makeElement({
-          tag: "ul",
-          class: "uk-navbar-nav",
-          children: [
-            ListItem(
-              makeElement({
-                tag: "a",
-                text: i18next.t("me_btn"),
-                onclick: async () => {
-                  await router.changePage("ME");
-                },
-              }),
-            ),
-          ],
-        }),
-      }),
-    ],
-  });
-}
-
-export function reloadNavBar(router: PageRouter): void {
-  document.querySelector("#navBar").replaceWith(NavBar(router));
-}

src/elements/NavBar.tsx

@@ -0,0 +1,62 @@
+import { JSX, render } from "preact";
+import { PageRouter } from "z-pagerouter";
+import i18next from "i18next";
+
+export type NavBarProps = {
+  router: PageRouter;
+};
+
+export function NavBar(props: NavBarProps): JSX.Element {
+  return (
+    <nav class="uk-navbar uk-navbar-container">
+      <div class="uk-navbar-left">
+        <ul class="uk-navbar-nav">
+          <li>
+            <a
+              onClick={async () => {
+                await props.router.changePage("HOME");
+              }}
+            >
+              {i18next.t("home_btn")}
+            </a>
+          </li>
+          <li>
+            <a
+              onClick={async () => {
+                await props.router.goBack();
+              }}
+            >
+              {i18next.t("back_btn")}
+            </a>
+          </li>
+          <li>
+            <a
+              onClick={async () => {
+                await props.router.refresh();
+              }}
+            >
+              {i18next.t("refresh_btn")}
+            </a>
+          </li>
+        </ul>
+      </div>
+      <div class="uk-navbar-right">
+        <ul class="uk-navbar-nav">
+          <li>
+            <a
+              onClick={async () => {
+                await props.router.changePage("ME");
+              }}
+            >
+              {i18next.t("me_btn")}
+            </a>
+          </li>
+        </ul>
+      </div>
+    </nav>
+  );
+}
+
+export function reloadNavBar(router: PageRouter): void {
+  render(<NavBar router={router} />, document.querySelector("#navBarBox"));
+}

src/main.ts

@@ -19,7 +19,6 @@ Prism.highlightAll();
 
 // Actual Imports
 
-import { NavBar } from "./elements/NavBar";
 import { PageRouter } from "z-pagerouter";
 import { formatDistance } from "./formatDistance";
 import { getSealStatus } from "./api/sys/getSealStatus";
@@ -27,6 +26,7 @@ import { makeElement } from "z-makeelement";
 import { pageList } from "./allPages";
 import { pageState } from "./globalPageState";
 import { playground } from "./playground";
+import { reloadNavBar } from "./elements/NavBar";
 import i18next from "i18next";
 
 // @ts-ignore
@@ -34,7 +34,7 @@ import translations from "./translations/index.mjs";
 
 async function onLoad(): Promise<void> {
   document.body.innerHTML = "";
-  document.body.appendChild(makeElement({ tag: "div", id: "navBarReplace" }));
+  document.body.appendChild(makeElement({ tag: "div", id: "navBarBox" }));
   document.body.appendChild(
     makeElement({
       tag: "div",
@@ -65,7 +65,7 @@ async function onLoad(): Promise<void> {
     document.getElementById("pageTitle"),
   );
 
-  document.querySelector("#navBarReplace").replaceWith(NavBar(pageRouter));
+  reloadNavBar(pageRouter);
 
   pageRouter.addEventListener("pageChanged", async function (_) {
     pageState.currentPage = await pageRouter.getCurrentPageID();