custom_components/bahmcloud_store/panel/panel.js aktualisiert

custom_components/bahmcloud_store/panel/panel.js

@@ -43,38 +43,73 @@ class BahmcloudStorePanel extends HTMLElement {
   // --- Mobile navigation helpers ---
 
   _toggleMenu() {
-    // Preferred: HA listens to these events in many builds
+    // Primary: dispatch the standard HA event from THIS element so it bubbles
+    // through the HA DOM tree (this is how many custom cards do it).
     try {
-      window.dispatchEvent(new CustomEvent("hass-toggle-menu", { bubbles: true, composed: true }));
-      window.dispatchEvent(new CustomEvent("hass-toggle-drawer", { bubbles: true, composed: true }));
+      const ev = new Event("hass-toggle-menu", { bubbles: true, composed: true });
+      this.dispatchEvent(ev);
     } catch (_) {}
 
-    // Fallback: try to find the drawer and toggle it (best-effort)
+    // Secondary: try again via host/root (some environments proxy events)
+    try {
+      const host = this.shadowRoot?.host;
+      if (host) {
+        const ev2 = new Event("hass-toggle-menu", { bubbles: true, composed: true });
+        host.dispatchEvent(ev2);
+      }
+    } catch (_) {}
+
+    // Fallback: try common drawer implementations (best-effort).
+    // HA frontend has changed over time (app-drawer-layout -> mwc-drawer etc.).
     try {
       const ha = document.querySelector("home-assistant");
-      const main = ha?.shadowRoot?.querySelector("home-assistant-main");
-      const drawerLayout =
-        main?.shadowRoot?.querySelector("app-drawer-layout") ||
-        main?.shadowRoot?.querySelector("ha-drawer") ||
-        main?.shadowRoot?.querySelector("ha-sidebar");
+      const haRoot = ha?.shadowRoot;
 
-      if (drawerLayout?.toggleDrawer) {
-        drawerLayout.toggleDrawer();
+      const main =
+        haRoot?.querySelector("home-assistant-main") ||
+        haRoot?.querySelector("home-assistant-main#main");
+
+      const mainRoot = main?.shadowRoot;
+
+      // Try mwc-drawer / ha-drawer / app-drawer-layout variants
+      const drawer =
+        mainRoot?.querySelector("mwc-drawer") ||
+        mainRoot?.querySelector("ha-drawer") ||
+        mainRoot?.querySelector("app-drawer-layout");
+
+      if (drawer) {
+        // mwc-drawer has .open boolean
+        if ("open" in drawer) {
+          drawer.open = true;
+          return;
+        }
+        // app-drawer-layout had toggleDrawer()
+        if (typeof drawer.toggleDrawer === "function") {
+          drawer.toggleDrawer();
+          return;
+        }
+      }
+
+      // Last attempt: HA layout container sometimes exposes a method
+      const layout =
+        mainRoot?.querySelector("ha-panel-lovelace") ||
+        mainRoot?.querySelector("ha-panel");
+
+      if (layout && typeof layout.toggleMenu === "function") {
+        layout.toggleMenu();
         return;
       }
     } catch (_) {}
 
-    // If nothing works, show a hint
-    this._error = "Unable to open the sidebar on this client. Use the browser back button.";
+    // If we get here, we couldn't open it programmatically in this client.
+    this._error = "Unable to open the sidebar on this client. Use the back button.";
     this._update();
   }
 
   _goBack() {
-    // Works even if HA chrome is hidden
     try {
       history.back();
     } catch (_) {
-      // fallback
       window.location.href = "/";
     }
   }
@@ -137,7 +172,6 @@ class BahmcloudStorePanel extends HTMLElement {
           --bcs-accent: #1E88E5; /* Bahmcloud Blue */
         }
 
-        /* Mobile-safe top bar that replaces HA chrome if HA renders this panel fullscreen */
         .mobilebar {
           position: sticky;
           top: 0;
@@ -310,7 +344,6 @@ class BahmcloudStorePanel extends HTMLElement {
         a:hover { text-decoration: underline; }
       </style>
 
-      <!-- This bar ensures navigation on mobile even if HA renders fullscreen panels -->
       <div class="mobilebar">
         <div class="left">
           <div class="iconbtn" id="menuBtn" title="Menu">☰</div>