style: add dropdown group title rtl style (#23404)

* style: add dropdown group title rtl style

* fix margin

* fix lint

components/dropdown/demo/sub-menu.md

@@ -21,8 +21,10 @@ const { SubMenu } = Menu;
 
 const menu = (
   <Menu>
-    <Menu.Item>1st menu item</Menu.Item>
-    <Menu.Item>2nd menu item</Menu.Item>
+    <Menu.ItemGroup title="Group title">
+      <Menu.Item>1st menu item</Menu.Item>
+      <Menu.Item>2nd menu item</Menu.Item>
+    </Menu.ItemGroup>
     <SubMenu title="sub menu">
       <Menu.Item>3rd menu item</Menu.Item>
       <Menu.Item>4th menu item</Menu.Item>

components/dropdown/style/rtl.less

@@ -16,6 +16,13 @@
   }
 
   &-menu {
+    &-item-group-title {
+      .@{dropdown-prefix-cls}-rtl & {
+        direction: rtl;
+        text-align: right;
+      }
+    }
+
     &-submenu-popup {
       ul,
       li {

site/theme/template/Layout/Header/More.tsx

@@ -55,7 +55,7 @@ export function getEcosystemGroup({ isZhCN }: SharedProps): React.ReactElement {
 
 export default (props: SharedProps) => {
   const menu = <Menu>{getEcosystemGroup(props)}</Menu>;
-
+  const DownStyle = props.isRTL ? '-1px 2px 0 0' : '-1px 0 0 2px';
   return (
     <Dropdown overlay={menu} placement="bottomRight">
       <Button size="small" className="header-button">
@@ -63,9 +63,8 @@ export default (props: SharedProps) => {
         <DownOutlined
           style={{
             fontSize: '9px',
-            marginLeft: 2,
+            margin: DownStyle,
             verticalAlign: 'middle',
-            marginTop: -1,
           }}
         />
       </Button>

site/theme/template/Layout/Header/Navigation.tsx

@@ -12,6 +12,7 @@ import './Navigation.less';
 
 export interface NavigationProps extends SharedProps {
   isMobile: boolean;
+  isRTL: boolean;
   pathname: string;
   responsive: null | 'narrow' | 'crowded';
   location: { pathname: string };
@@ -22,6 +23,7 @@ export interface NavigationProps extends SharedProps {
 
 export default ({
   isZhCN,
+  isRTL,
   isMobile,
   pathname,
   responsive,
@@ -32,10 +34,7 @@ export default ({
 }: NavigationProps) => {
   const menuMode = isMobile ? 'inline' : 'horizontal';
 
-  const module = pathname
-    .split('/')
-    .slice(0, -1)
-    .join('/');
+  const module = pathname.split('/').slice(0, -1).join('/');
   let activeMenuItem = module || 'home';
   if (location.pathname === 'changelog' || location.pathname === 'changelog-cn') {
     activeMenuItem = 'docs/react';
@@ -56,7 +55,7 @@ export default ({
     <Menu.Item key="switch-direction" onClick={onDirectionChange}>
       {directionText}
     </Menu.Item>,
-    getEcosystemGroup({ isZhCN }),
+    getEcosystemGroup({ isZhCN, isRTL }),
   ];
 
   if (isMobile) {

site/theme/template/Layout/Header/index.tsx

@@ -180,6 +180,7 @@ class Header extends React.Component<HeaderProps, HeaderState> {
       <SiteContext.Consumer>
         {({ isMobile }) => {
           const { menuVisible, windowWidth, searching } = this.state;
+          const { direction } = this.context;
           const {
             location,
             themeConfig,
@@ -197,6 +198,7 @@ class Header extends React.Component<HeaderProps, HeaderState> {
           const isHome = ['', 'index', 'index-cn'].includes(pathname);
 
           const isZhCN = locale === 'zh-CN';
+          const isRTL = direction === 'rtl';
           let responsive: null | 'narrow' | 'crowded' = null;
           if (windowWidth < RESPONSIVE_XS) {
             responsive = 'crowded';
@@ -211,6 +213,7 @@ class Header extends React.Component<HeaderProps, HeaderState> {
 
           const sharedProps = {
             isZhCN,
+            isRTL,
           };
 
           const searchBox = (

site/theme/template/Layout/Header/interface.tsx

@@ -1,3 +1,4 @@
 export interface SharedProps {
   isZhCN: boolean;
+  isRTL: boolean;
 }