custom_components/bahmcloud_store/panel/panel.js aktualisiert

custom_components/bahmcloud_store/panel/panel.js

@@ -42,25 +42,34 @@ class BahmcloudStorePanel extends HTMLElement {
 
   // --- Mobile navigation helpers ---
 
+  _isDesktop() {
+    // If the viewport is wide enough, HA typically shows the sidebar permanently.
+    // We treat this as "desktop" and hide/disable the menu toggle.
+    return window.matchMedia && window.matchMedia("(min-width: 1024px)").matches;
+  }
+
   _toggleMenu() {
-    // 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).
+    // On desktop the sidebar is usually always visible; do nothing.
+    if (this._isDesktop()) return;
+
+    // Primary: dispatch the standard HA event from THIS element so it bubbles.
     try {
       const ev = new Event("hass-toggle-menu", { bubbles: true, composed: true });
       this.dispatchEvent(ev);
+      return; // often enough on mobile
     } catch (_) {}
 
-    // Secondary: try again via host/root (some environments proxy events)
+    // Secondary: try again via host/root
     try {
       const host = this.shadowRoot?.host;
       if (host) {
         const ev2 = new Event("hass-toggle-menu", { bubbles: true, composed: true });
         host.dispatchEvent(ev2);
+        return;
       }
     } catch (_) {}
 
-    // Fallback: try common drawer implementations (best-effort).
-    // HA frontend has changed over time (app-drawer-layout -> mwc-drawer etc.).
+    // Fallback DOM attempts
     try {
       const ha = document.querySelector("home-assistant");
       const haRoot = ha?.shadowRoot;
@@ -71,26 +80,22 @@ class BahmcloudStorePanel extends HTMLElement {
 
       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");
@@ -101,7 +106,7 @@ class BahmcloudStorePanel extends HTMLElement {
       }
     } catch (_) {}
 
-    // If we get here, we couldn't open it programmatically in this client.
+    // Only show an error on mobile if everything failed.
     this._error = "Unable to open the sidebar on this client. Use the back button.";
     this._update();
   }
@@ -169,7 +174,7 @@ class BahmcloudStorePanel extends HTMLElement {
           display: block;
           height: auto;
           min-height: 100%;
-          --bcs-accent: #1E88E5; /* Bahmcloud Blue */
+          --bcs-accent: #1E88E5;
         }
 
         .mobilebar {
@@ -181,7 +186,6 @@ class BahmcloudStorePanel extends HTMLElement {
           justify-content: space-between;
           gap: 8px;
           padding: 10px 12px;
-
           background: var(--app-header-background-color, var(--card-background-color));
           color: var(--app-header-text-color, var(--primary-text-color));
           border-bottom: 1px solid var(--divider-color);
@@ -211,6 +215,13 @@ class BahmcloudStorePanel extends HTMLElement {
           line-height: 1;
         }
 
+        /* Hide the menu button on desktop where the sidebar is already visible */
+        @media (min-width: 1024px) {
+          .iconbtn.menu {
+            display: none;
+          }
+        }
+
         .brandtitle {
           display: flex;
           flex-direction: column;
@@ -346,7 +357,7 @@ class BahmcloudStorePanel extends HTMLElement {
 
       <div class="mobilebar">
         <div class="left">
-          <div class="iconbtn" id="menuBtn" title="Menu">☰</div>
+          <div class="iconbtn menu" id="menuBtn" title="Menu">☰</div>
           <div class="iconbtn" id="backBtn" title="Back">←</div>
           <div class="brandtitle">
             <div class="t">Bahmcloud Store</div>