Add swipe to close action to drawer in modal mode (#16042)

src/components/ha-drawer.ts

@@ -1,12 +1,16 @@
+import { DIRECTION_LEFT, Manager, Swipe } from "@egjs/hammerjs";
 import { DrawerBase } from "@material/mwc-drawer/mwc-drawer-base";
 import { styles } from "@material/mwc-drawer/mwc-drawer.css";
-import { css } from "lit";
+import { css, PropertyValues } from "lit";
 import { customElement } from "lit/decorators";
+import { fireEvent } from "../common/dom/fire_event";
 
 const blockingElements = (document as any).$blockingElements;
 
 @customElement("ha-drawer")
 export class HaDrawer extends DrawerBase {
+  private _mc?: HammerManager;
+
   protected createAdapter() {
     return {
       ...super.createAdapter(),
@@ -23,6 +27,26 @@ export class HaDrawer extends DrawerBase {
     };
   }
 
+  protected updated(changedProps: PropertyValues) {
+    super.updated(changedProps);
+    if (changedProps.has("open") && this.open && this.type === "modal") {
+      this._mc = new Manager(document, {
+        touchAction: "pan-y",
+      });
+      this._mc.add(
+        new Swipe({
+          direction: DIRECTION_LEFT,
+        })
+      );
+      this._mc.on("swipeleft", () => {
+        fireEvent(this, "hass-toggle-menu", { open: false });
+      });
+    } else if (this._mc) {
+      this._mc.destroy();
+      this._mc = undefined;
+    }
+  }
+
   static override styles = [
     styles,
     css`

src/components/ha-sidebar.ts

@@ -28,8 +28,8 @@ import {
   CSSResultGroup,
   html,
   LitElement,
-  PropertyValues,
   nothing,
+  PropertyValues,
 } from "lit";
 import { customElement, eventOptions, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";