add basic navigation

dist/index.js

@@ -96,9 +96,19 @@
     return translations.en[key];
   }
 
+  // src/messageTab.tsx
+  function MessageTab() {
+    return /* @__PURE__ */ createElement("article", { id: "message-tab" }, /* @__PURE__ */ createElement("header", null, getText("messages")));
+  }
+
+  // src/settingsTab.tsx
+  function SettingsTab() {
+    return /* @__PURE__ */ createElement("article", { id: "settings-tab" }, /* @__PURE__ */ createElement("header", null, getText("settings")));
+  }
+
   // src/index.tsx
   document.body.prepend(
-    /* @__PURE__ */ createElement("menu", null, /* @__PURE__ */ createElement("a", { class: "tab-link", href: "settings-tab", active: true }, /* @__PURE__ */ createElement("span", { class: "icon" }, "settings"), getText("settings")), /* @__PURE__ */ createElement("a", { class: "tab-link", href: "message-tab" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "forum"), getText("messages")))
+    /* @__PURE__ */ createElement("menu", null, /* @__PURE__ */ createElement("a", { class: "tab-link", href: "#settings-tab", active: true }, /* @__PURE__ */ createElement("span", { class: "icon" }, "settings"), getText("settings")), /* @__PURE__ */ createElement("a", { class: "tab-link", href: "#message-tab" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "forum"), getText("messages")))
   );
-  document.querySelector("main").append();
+  document.querySelector("main").append(SettingsTab(), MessageTab());
 })();

src/messageTab.tsx

@@ -3,5 +3,9 @@ import * as React from "bloatless-react";
 import { getText } from "./translations";
 
 export function MessageTab() {
-  return <article></article>;
+  return (
+    <article id="message-tab">
+      <header>{getText("messages")}</header>
+    </article>
+  );
 }

src/settingsTab.tsx

@@ -3,5 +3,9 @@ import * as React from "bloatless-react";
 import { getText } from "./translations";
 
 export function SettingsTab() {
-  return <article></article>;
+  return (
+    <article id="settings-tab">
+      <header>{getText("settings")}</header>
+    </article>
+  );
 }