如何在RTL模式下适配Shadcn UI侧边栏？解决Chevron图标问题

1. 全局开启RTL方向 #

在根布局文件（如app/layout.tsx）中，给<html>标签添加dir="rtl"属性，全局启用从右到左排版：

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ar" dir="rtl">
      <body>{children}</body>
    </html>
  );
}

2. 优化侧边栏子菜单样式 #

修改你已有的SidebarMenuSub组件，适配RTL下的边框、内边距和位移：

function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
  return (
    <ul
      data-slot="sidebar-menu-sub"
      data-sidebar="menu-sub"
      className={cn(
        "border-sidebar-border mx-3.5 flex min-w-0 flex-col gap-1 border-s ps-2.5 py-0.5 rtl:translate-x-[-1px]",
        "group-data-[collapsible=icon]:hidden",
        className
      )}
      {...props}
    />
  )
}

• 把px-2.5改为ps-2.5（ps是padding-start缩写，RTL下自动对应右侧内边距）
• 添加rtl:translate-x-[-1px]抵消原translate-x-px在RTL下的反向位移

3. 修正Chevron图标位置与动画 #

找到渲染折叠图标的SidebarMenuItem组件，调整布局和图标旋转逻辑：

调整菜单项布局顺序 #

修改SidebarMenuItem的className，添加RTL专属的反向排列：

function SidebarMenuItem({ className, children, ...props }: React.ComponentProps<"li">) {
  return (
    <li
      data-slot="sidebar-menu-item"
      data-sidebar="menu-item"
      className={cn(
        "group flex cursor-pointer items-center justify-between rounded-md px-3 py-2 text-sm font-medium transition-all hover:bg-sidebar-hover focus:outline-none focus:ring-2 focus:ring-sidebar-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 rtl:flex-row-reverse",
        className
      )}
      {...props}
    >
      {children}
    </li>
  );
}

• rtl:flex-row-reverse让菜单项的文本与Chevron图标位置反转，使图标位于文本右侧（RTL布局的视觉末端）

适配RTL下的图标旋转动画 #

给Chevron图标添加RTL专属旋转类，确保展开/收起动画符合视觉逻辑：

<ChevronRightIcon 
  className="h-4 w-4 transition-transform group-data-[state=open]:rotate-90 rtl:rotate-180 rtl:group-data-[state=open]:rotate-[-90deg]" 
/>

• rtl:rotate-180让图标在RTL下初始方向反转
• rtl:group-data-[state=open]:rotate-[-90deg]确保展开时的旋转动画适配RTL布局

4. 全局文本对齐补充（可选） #

如果部分文本仍未正确右对齐，可在全局样式文件中添加：

[dir="rtl"] {
  text-align: right;
}

内容的提问来源于stack exchange，提问作者Dreamer64