feat: Add RTL support for header navigation

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>
         )}

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>
   )