From 890be2c17772c7725488cb5f2f615b1514690fe6 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Mon, 3 Apr 2023 20:55:38 +0200
Subject: [PATCH] Fix drawer in RTL (#16039

* Fix drawer in RTL

* format

* make it update when lang changes

* Update ha-drawer.ts

* Update ha-drawer.ts
---
 src/components/ha-drawer.ts        | 19 +++++++++++++++----
 src/layouts/home-assistant-main.ts |  2 ++
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/components/ha-drawer.ts b/src/components/ha-drawer.ts
index 95c4c074b0..5fcfd031c6 100644
--- a/src/components/ha-drawer.ts
+++ b/src/components/ha-drawer.ts
@@ -1,14 +1,21 @@
-import { DIRECTION_LEFT, Manager, Swipe } from "@egjs/hammerjs";
+import {
+  DIRECTION_LEFT,
+  DIRECTION_RIGHT,
+  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, PropertyValues } from "lit";
-import { customElement } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 
 const blockingElements = (document as any).$blockingElements;
 
 @customElement("ha-drawer")
 export class HaDrawer extends DrawerBase {
+  @property() public direction: "ltr" | "rtl" = "ltr";
+
   private _mc?: HammerManager;
 
   protected createAdapter() {
@@ -29,16 +36,20 @@ export class HaDrawer extends DrawerBase {
 
   protected updated(changedProps: PropertyValues) {
     super.updated(changedProps);
+    if (changedProps.has("direction")) {
+      this.mdcRoot.dir = this.direction;
+    }
     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,
+          direction:
+            this.direction === "rtl" ? DIRECTION_RIGHT : DIRECTION_LEFT,
         })
       );
-      this._mc.on("swipeleft", () => {
+      this._mc.on("swipeleft swiperight", () => {
         fireEvent(this, "hass-toggle-menu", { open: false });
       });
     } else if (this._mc) {
diff --git a/src/layouts/home-assistant-main.ts b/src/layouts/home-assistant-main.ts
index cd9cdf67b7..afd153947b 100644
--- a/src/layouts/home-assistant-main.ts
+++ b/src/layouts/home-assistant-main.ts
@@ -11,6 +11,7 @@ import { customElement, property, state } from "lit/decorators";
 import { fireEvent, HASSDomEvent } from "../common/dom/fire_event";
 import { listenMediaQuery } from "../common/dom/media_query";
 import { toggleAttribute } from "../common/dom/toggle_attribute";
+import { computeRTLDirection } from "../common/util/compute_rtl";
 import "../components/ha-drawer";
 import { showNotificationDrawer } from "../dialogs/notifications/show-notification-drawer";
 import type { HomeAssistant, Route } from "../types";
@@ -61,6 +62,7 @@ export class HomeAssistantMain extends LitElement {
       <ha-drawer
         .type=${sidebarNarrow ? "modal" : ""}
         .open=${sidebarNarrow ? this._drawerOpen : undefined}
+        .direction=${computeRTLDirection(this.hass)}
         @MDCDrawer:closed=${this._drawerClosed}
       >
         <ha-sidebar