Fix sidebar issues (#6853)

* Fix sidebar issues

* fix navigate in demo

src/components/ha-sidebar.ts

@@ -322,7 +322,7 @@ class HaSidebar extends LitElement {
                 )}
                 href="#external-app-configuration"
                 tabindex="-1"
-                @click=${this._handleExternalAppConfiguration}
+                @panel-tap=${this._handleExternalAppConfiguration}
                 @mouseenter=${this._itemMouseEnter}
                 @mouseleave=${this._itemMouseLeave}
               >
@@ -479,7 +479,8 @@ class HaSidebar extends LitElement {
   }
 
   private async _handleAction(ev: CustomEvent<ActionHandlerDetail>) {
-    if (ev.detail.action !== "hold") {
+    if (ev.detail.action === "tap") {
+      fireEvent(ev.target as HTMLElement, "panel-tap");
       return;
     }
 
@@ -497,6 +498,10 @@ class HaSidebar extends LitElement {
     }
     this._editMode = true;
 
+    if (!this.expanded) {
+      fireEvent(this, "hass-toggle-menu");
+    }
+
     await this.updateComplete;
 
     this._createSortable();
@@ -655,8 +660,11 @@ class HaSidebar extends LitElement {
     );
   }
 
-  private _handlePanelTap(ev: Event) {
-    navigate(this, (ev.currentTarget as HTMLAnchorElement).href);
+  private async _handlePanelTap(ev: Event) {
+    const path = __DEMO__
+      ? (ev.currentTarget as HTMLAnchorElement).getAttribute("href")!
+      : (ev.currentTarget as HTMLAnchorElement).href;
+    navigate(this, path);
   }
 
   private _renderPanel(
@@ -668,10 +676,10 @@ class HaSidebar extends LitElement {
     return html`
       <a
         aria-role="option"
-        href="${`/${urlPath}`}"
-        data-panel="${urlPath}"
+        href=${`/${urlPath}`}
+        data-panel=${urlPath}
         tabindex="-1"
-        @tap=${this._handlePanelTap}
+        @panel-tap=${this._handlePanelTap}
         @mouseenter=${this._itemMouseEnter}
         @mouseleave=${this._itemMouseLeave}
       >
@@ -980,4 +988,8 @@ declare global {
   interface HTMLElementTagNameMap {
     "ha-sidebar": HaSidebar;
   }
+
+  interface HASSDomEvents {
+    "panel-tap": undefined;
+  }
 }

src/panels/lovelace/common/directives/action-handler-directive.ts

@@ -154,6 +154,7 @@ class ActionHandler extends HTMLElement implements ActionHandler {
       if (["touchend", "touchcancel"].includes(ev.type) && this.cancelled) {
         return;
       }
+      const target = ev.target as HTMLElement;
       // Prevent mouse event if touch event
       if (ev.cancelable) {
         ev.preventDefault();
@@ -164,7 +165,7 @@ class ActionHandler extends HTMLElement implements ActionHandler {
         this.timer = undefined;
       }
       if (options.hasHold && this.held) {
-        fireEvent(element, "action", { action: "hold" });
+        fireEvent(target, "action", { action: "hold" });
       } else if (options.hasDoubleClick) {
         if (
           (ev.type === "click" && (ev as MouseEvent).detail < 2) ||
@@ -172,15 +173,15 @@ class ActionHandler extends HTMLElement implements ActionHandler {
         ) {
           this.dblClickTimeout = window.setTimeout(() => {
             this.dblClickTimeout = undefined;
-            fireEvent(element, "action", { action: "tap" });
+            fireEvent(target, "action", { action: "tap" });
           }, 250);
         } else {
           clearTimeout(this.dblClickTimeout);
           this.dblClickTimeout = undefined;
-          fireEvent(element, "action", { action: "double_tap" });
+          fireEvent(target, "action", { action: "double_tap" });
         }
       } else {
-        fireEvent(element, "action", { action: "tap" });
+        fireEvent(target, "action", { action: "tap" });
       }
     };
 

src/resources/ha-sortable-style.ts

@@ -20,8 +20,6 @@ export const sortableStyles = css`
 
   #sortable {
     outline: none;
-    display: flex;
-    flex-direction: column;
   }
 
   .sortable-ghost {