feat: le menu

src/features/menu.ts → src/features/menu/index.ts

@@ -1,9 +1,9 @@
-import { defaultFeatures, getFeatures, saveFeatureConf } from "../config";
-import { dbg, info } from "../constants";
-import { featInfo } from "./index";
-import { FeatureConfig } from "../types";
-import { addGlobalStyle } from "../utils";
-import changelog from "../../changelog.md";
+import { defaultFeatures, getFeatures, saveFeatureConf } from "../../config";
+import { dbg, info } from "../../constants";
+import { featInfo } from "../index";
+import { FeatureConfig } from "../../types";
+import { addGlobalStyle } from "../../utils";
+import changelog from "../../../changelog.md";
 
 const branch = dbg ? "develop" : "main";
 

src/features/menu/menu.css

@@ -0,0 +1,3 @@
+.bytm-menu-tab[data-enabled="false"] {
+    display: none;
+}

src/features/menu/menu.html

@@ -0,0 +1,21 @@
+<dialog id="bytm-menu-dialog">
+    <div id="bytm-menu-header">
+        <div class="bytm-menu-header-option" onclick="() => setActiveTab('options');">
+            <h3>Options</h3>
+        </div>
+        <!-- <div class="bytm-menu-header-option" onclick="() => setActiveTab('info');">
+            <h3>Info</h3>
+        </div> -->
+        <div class="bytm-menu-header-option" onclick="() => setActiveTab('changelog');">
+            <h3>Changelog</h3>
+        </div>
+    </div>
+    <div id="bytm-menu-body">
+        <div class="bytm-menu-tab" id="bytm-menu-tab-options" data-enabled="true">
+        </div>
+        <!-- <div class="bytm-menu-tab" id="bytm-menu-tab-info" data-enabled="false">
+        </div> -->
+        <div class="bytm-menu-tab" id="bytm-menu-tab-changelog" data-enabled="false">
+        </div>
+    </div>
+</dialog>

src/features/menu/menu.js

@@ -0,0 +1,22 @@
+const tabsSelectors = {
+  options: "bytm-menu-tab-options",
+  // info: "bytm-menu-tab-info",
+  changelog: "bytm-menu-tab-changelog",
+};
+
+/** @param {keyof typeof tabsSelectors} tab */
+function setActiveTab(tab) {
+  const tabs = { ...tabsSelectors };
+  delete tabs[tab];
+  for(const disableTab of Object.keys(tabs))
+    document.querySelector(`#${tabs[disableTab]}`).dataset.enabled = "false";
+  document.querySelector(`#${tabsSelectors[tab]}`).dataset.enabled = "true";
+}
+
+function openMenu() {
+  document.querySelector("#bytm-menu-dialog").showModal();
+}
+
+function closeMenu() {
+  document.querySelector("#bytm-menu-dialog").close();
+}