feat(admin): implement full admin dashboard structure

static/js/warpbox-ui.js

@@ -53,5 +53,46 @@ function renderTemplate(template, data = {}) {
     });
 }
 
-return { toast, openPopup, closePopup, htmlEscape, renderTemplate };
+function bindMenuBar(options = {}) {
+    const root = options.root || document;
+    const itemSelector = options.itemSelector || ".menu-item";
+    const buttonSelector = options.buttonSelector || ".menu-button";
+    const items = Array.from(root.querySelectorAll(itemSelector));
+
+    function close() {
+        items.forEach((item) => {
+            item.classList.remove("is-open");
+            item.querySelector(buttonSelector)?.setAttribute("aria-expanded", "false");
+        });
+    }
+
+    function open(item) {
+        close();
+        item.classList.add("is-open");
+        item.querySelector(buttonSelector)?.setAttribute("aria-expanded", "true");
+    }
+
+    items.forEach((item) => {
+        const button = item.querySelector(buttonSelector);
+        button?.addEventListener("click", (event) => {
+            event.stopPropagation();
+            const wasOpen = item.classList.contains("is-open");
+            close();
+            if (!wasOpen) open(item);
+        });
+
+        item.addEventListener("mouseenter", () => {
+            if (!root.querySelector(`${itemSelector}.is-open`)) return;
+            open(item);
+        });
+    });
+
+    document.addEventListener("click", (event) => {
+        if (!event.target.closest(itemSelector)) close();
+    });
+
+    return { close, open };
+}
+
+return { toast, openPopup, closePopup, htmlEscape, renderTemplate, bindMenuBar };
 })();