From efb49d8e34eafdc3bc1f2a4cc277169729a9251a Mon Sep 17 00:00:00 2001
From: n4ze3m <n4ze3m@gmail.com>
Date: Sun, 29 Dec 2024 13:28:15 +0530
Subject: [PATCH] feat: Add RTL support for sidepanel settings header

---
 src/components/Sidepanel/Settings/header.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/Sidepanel/Settings/header.tsx b/src/components/Sidepanel/Settings/header.tsx
index 9f714d8..0919926 100644
--- a/src/components/Sidepanel/Settings/header.tsx
+++ b/src/components/Sidepanel/Settings/header.tsx
@@ -1,14 +1,22 @@
-import { ChevronLeft } from "lucide-react"
+import { ChevronLeft, ChevronRight } from "lucide-react"
 import { useTranslation } from "react-i18next"
 import { Link } from "react-router-dom"
 import logoImage from "~/assets/icon.png"
 
 export const SidepanelSettingsHeader = () => {
-  const { t } = useTranslation("common")
+  const { t , i18n} = useTranslation("common")
+  const isRTL = i18n?.dir() === "rtl"
+ 
   return (
     <div className="flex px-3 justify-start gap-3 bg-white dark:bg-[#171717] border-b border-gray-300 dark:border-gray-700  py-4 items-center">
       <Link to="/">
-        <ChevronLeft className="h-5 w-5 text-gray-500 dark:text-gray-400" />
+      {
+        isRTL ? (
+          <ChevronRight className="h-5 w-5 text-gray-500" />
+        ) : (
+          <ChevronLeft className="h-5 w-5 text-gray-500" />
+        )
+      }
       </Link>
       <div className="focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-700 flex items-center dark:text-white">
         <img className="h-6 w-auto" src={logoImage} alt={t("pageAssist")} />