start interface

src/index.tsx

@@ -1,3 +1,17 @@
-document.querySelector("main")!.append(
-    
-)
+import * as React from "bloatless-react";
+
+import { getText } from "./translations";
+
+document.body.prepend(
+  <menu>
+    <a class="tab-link" href="#settings-tab" active>
+      <span class="icon">settings</span>
+      {getText("settings")}
+    </a>
+    <a class="tab-link" href="#message-tab">
+      <span class="icon">forum</span>
+      {getText("messages")}
+    </a>
+  </menu>
+);
+document.querySelector("main")!.append();

src/translations.ts

@@ -0,0 +1,19 @@
+const englishTranslations = {
+  // settings
+  settings: "Settings",
+
+  // messages
+  messages: "Messages"
+};
+
+const translations = {
+  en: englishTranslations,
+};
+
+export function getText(key: keyof typeof englishTranslations): string {
+  const language = navigator.language.substring(0, 2);
+  if (translations[language]) {
+    return translations[language][key];
+  }
+  return translations.en[key];
+}