From 36b2a1bca3ae95e3aa8dcc1f17371946206cf93b Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Mon, 3 Apr 2023 19:52:54 +0200
Subject: [PATCH] Add swipe to close action to drawer in modal mode (#16042)

---
 src/components/ha-drawer.ts  | 26 +++++++++++++++++++++++++-
 src/components/ha-sidebar.ts |  2 +-
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/components/ha-drawer.ts b/src/components/ha-drawer.ts
index b23c897885..95c4c074b0 100644
--- a/src/components/ha-drawer.ts
+++ b/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`
diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts
index 156b4e777c..7036ab6d71 100644
--- a/src/components/ha-sidebar.ts
+++ b/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";