From a771c256c289b771df3cf2820c85643e885ca186 Mon Sep 17 00:00:00 2001
From: Jony J <1844749591@qq.com>
Date: Mon, 13 Jan 2025 12:32:12 +0800
Subject: [PATCH] fix(layout/collapse): icon direction in rtl mode (#52374)

* fix: collapse icon position in rtl mode

* fix: layout sider icon position in rtl mode

* chore: remove rtl demo
---
 components/collapse/Collapse.tsx | 2 +-
 components/layout/Sider.tsx      | 7 ++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/components/collapse/Collapse.tsx b/components/collapse/Collapse.tsx
index b7e4bf813b..e8ca7ea3dc 100644
--- a/components/collapse/Collapse.tsx
+++ b/components/collapse/Collapse.tsx
@@ -106,7 +106,7 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
           mergedExpandIcon(panelProps)
         ) : (
           <RightOutlined
-            rotate={panelProps.isActive ? 90 : undefined}
+            rotate={panelProps.isActive ? (direction === 'rtl' ? -90 : 90) : undefined}
             aria-label={panelProps.isActive ? 'expanded' : 'collapsed'}
           />
         );
diff --git a/components/layout/Sider.tsx b/components/layout/Sider.tsx
index f5edd636bf..504854bc4b 100644
--- a/components/layout/Sider.tsx
+++ b/components/layout/Sider.tsx
@@ -99,7 +99,7 @@ const Sider = React.forwardRef<HTMLDivElement, SiderProps>((props, ref) => {
   };
 
   // =========================== Prefix ===========================
-  const { getPrefixCls } = useContext(ConfigContext);
+  const { getPrefixCls, direction } = useContext(ConfigContext);
   const prefixCls = getPrefixCls('layout-sider', customizePrefixCls);
 
   const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
@@ -171,9 +171,10 @@ const Sider = React.forwardRef<HTMLDivElement, SiderProps>((props, ref) => {
           {trigger || <BarsOutlined />}
         </span>
       ) : null;
+    const reverseIcon = (direction === 'rtl') === !reverseArrow;
     const iconObj = {
-      expanded: reverseArrow ? <RightOutlined /> : <LeftOutlined />,
-      collapsed: reverseArrow ? <LeftOutlined /> : <RightOutlined />,
+      expanded: reverseIcon ? <RightOutlined /> : <LeftOutlined />,
+      collapsed: reverseIcon ? <LeftOutlined /> : <RightOutlined />,
     };
     const status = collapsed ? 'collapsed' : 'expanded';
     const defaultTrigger = iconObj[status];