feat: enhance main menu with event handling for item selection and toast notifications

Author: caperaven

app/main-menu/main-menu.html

@@ -1,6 +1,6 @@
 <app-header><h2>Main Menu</h2></app-header>
 
-<menu-container>
+<menu-container id="main-menu">
     <menu-label>Menu 1</menu-label>
     <menu-item value="1">Item 1</menu-item>
     <menu-item value="2">Item 2</menu-item>

app/main-menu/main-menu.js

@@ -1,8 +1,12 @@
+import { EventsManager } from "../../src/system/events-manager.js";
 import "./../../components/menu/menu-container/menu-container.js";
+import "./../../components/toast-notification/toast-notification.js";
 
 export default class MainMenuView extends HTMLElement {
 	static tag = "main-menu-view";
 
+	#eventsManager = new EventsManager();
+
 	constructor() {
 		super();
 		this.attachShadow({ mode: "open" });
@@ -12,9 +16,20 @@ export default class MainMenuView extends HTMLElement {
 		this.shadowRoot.innerHTML = await api.call("component", "load_html", {
 			url: import.meta.url,
 		});
+
+		requestAnimationFrame(() => {
+			const menu = this.shadowRoot.querySelector("#main-menu");
+			this.#eventsManager.addEvent(menu, "selected", this.#menuSelected.bind(this));
+		})
+	}
+
+	async disconnectedCallback() {
+		this.#eventsManager = this.#eventsManager.dispose();
 	}
 
-	load(data) {
+	#menuSelected(event) {
+		const { detail } = event;
+		toastNotification.info(`Selected: ${detail}`);
 	}
 }
 

components/menu/menu-container/menu-container-input.js

@@ -35,6 +35,11 @@ function menuItemCliced(event) {
     const parent = element.parentElement;
 
     if (element.tagName === "MENU-ITEM") {
+        if (element.getAttribute("value") != null) {
+            this.dispatchEvent(new CustomEvent("selected", { detail: element.getAttribute("value") }));
+            return closeAllGroups.call(this);
+        }
+
         if (parent.tagName === "MENU-GROUP") {
             const isExpanded = element.getAttribute("aria-expanded") === "true";
             element.setAttribute("aria-expanded", !isExpanded);