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

---
 src/components/Layouts/Header.tsx | 11 +++++++++--
 src/routes/firefox-route.tsx      |  6 ++----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/components/Layouts/Header.tsx b/src/components/Layouts/Header.tsx
index b15a7d7..4f4da36 100644
--- a/src/components/Layouts/Header.tsx
+++ b/src/components/Layouts/Header.tsx
@@ -2,6 +2,7 @@ import { useStorage } from "@plasmohq/storage/hook"
 import {
   BrainCog,
   ChevronLeft,
+  ChevronRight,
   CogIcon,
   ComputerIcon,
   GithubIcon,
@@ -31,7 +32,9 @@ export const Header: React.FC<Props> = ({
   setOpenModelSettings,
   setSidebarOpen
 }) => {
-  const { t } = useTranslation(["option", "common"])
+  const { t, i18n } = useTranslation(["option", "common"])
+  const isRTL = i18n?.dir() === "rtl"
+
   const [shareModeEnabled] = useStorage("shareMode", false)
   const [hideCurrentChatModelSettings] = useStorage(
     "hideCurrentChatModelSettings",
@@ -97,7 +100,11 @@ export const Header: React.FC<Props> = ({
             <NavLink
               to="/"
               className="text-gray-500 items-center dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
-              <ChevronLeft className="w-8 h-8" />
+              {isRTL ? (
+                <ChevronRight className={`w-8 h-8`} />
+              ) : (
+                <ChevronLeft className={`w-8 h-8`} />
+              )}
             </NavLink>
           </div>
         )}
diff --git a/src/routes/firefox-route.tsx b/src/routes/firefox-route.tsx
index 456ba34..a338bf5 100644
--- a/src/routes/firefox-route.tsx
+++ b/src/routes/firefox-route.tsx
@@ -9,8 +9,7 @@ export const OptionRouting = () => {
   return (
     <div className={`${mode === "dark" ? "dark" : "light"} arimo`}>
       <Suspense fallback={<PageAssistLoader />}>
-  
-          <OptionRoutingFirefox />
+        <OptionRoutingFirefox />
       </Suspense>
     </div>
   )
@@ -22,8 +21,7 @@ export const SidepanelRouting = () => {
   return (
     <div className={`${mode === "dark" ? "dark" : "light"} arimo`}>
       <Suspense fallback={<PageAssistLoader />}>
-   
-          <SidepanelRoutingFirefox />
+        <SidepanelRoutingFirefox />
       </Suspense>
     </div>
   )