fix: restore custom menu functionality after refactoring

- Initialize this.customMenu in node_helper start()
- Create dedicated nav element for custom menus in createDynamicMenu()
- Add dynamic menu title support in updateHeaderTitle()
- Copy custom_menu.example.json to config directory in demo setup

The custom menu feature was broken after refactoring because items were
inserted into the wrong nav container and customMenu object was not
initialized, causing menu items to not display correctly.

Author: KristjanESPERANTO

demo.config.js

@@ -92,6 +92,7 @@ let config = {
       position: "bottom_right",
       config: {
         secureEndpoints: false,
+        customMenu: "custom_menu.example.json",
         classes: {
           "Toggle Weather": {
             toggle: ["weather"]

node_helper.js

@@ -72,6 +72,7 @@ module.exports = NodeHelper.create({
     /* API EXTENSION - Added v2.0.0 */
     this.externalApiRoutes = {};
     this.moduleApiMenu = {};
+    this.customMenu = {};
   },
 
   stop () {
@@ -1281,6 +1282,7 @@ module.exports = NodeHelper.create({
       }
       fs.readFile(menuPath, (error, data) => {
         if (error) {
+          Log.error(`Error reading custom menu: ${error}`);
           return;
         } else {
           this.customMenu = {...this.customMenu, ...JSON.parse(this.translate(data.toString()))};

remote.js

@@ -464,6 +464,13 @@ const Remote = {
         titleText = classesButton?.querySelector(".text")?.textContent || this.translate("TITLE");
       }
 
+      // For custom/dynamic menus, use button text
+      if (!titleText && key.endsWith("-menu")) {
+        const buttonId = key.replace("-menu", "-button");
+        const button = document.getElementById(buttonId);
+        titleText = button?.querySelector(".text")?.textContent;
+      }
+
       if (titleText) {
         headerTitleElement.textContent = titleText;
       }
@@ -2083,7 +2090,29 @@ const Remote = {
         globalThis.location.hash = "main-menu";
       }
     }
-    this.createMenuElement(content, "main", document.querySelector("#alert-button"));
+
+    // Create button in main menu
+    const button = this.createMenuElement(content, "main", document.querySelector("#alert-button"));
+
+    // Create dedicated nav element for this menu
+    if (button && content.items && content.items.length > 0) {
+      const mainElement = document.querySelector("main");
+      const nav = document.createElement("nav");
+      nav.className = `menu-nav menu-element hidden ${content.id}-menu`;
+
+      // Insert nav after other nav elements
+      const lastNav = mainElement.querySelector("nav:last-of-type");
+      if (lastNav) {
+        lastNav.parentNode.insertBefore(nav, lastNav.nextSibling);
+      } else {
+        mainElement.append(nav);
+      }
+
+      // Create menu items inside the new nav
+      for (const item of content.items) {
+        this.createMenuElement(item, content.id, nav.lastChild || nav);
+      }
+    }
   }
 };