From e2eab5d81371ddd38d2137e9135dcb7152010dc6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9C=AA=E8=A7=89=E9=9B=A8=E5=A3=B0?= <544022268@qq.com>
Date: Mon, 5 Jun 2023 22:34:03 +0800
Subject: [PATCH] docs: fix footer PrevAndNext icons in RTL (#42837)

* fix: footer PrevAndNext rtl

* chore: adjust

* Update useMenu.tsx

---------

Co-authored-by: lijianan <574980606@qq.com>
---
 .dumi/hooks/useMenu.tsx            | 17 ++++++++--------
 .dumi/theme/common/PrevAndNext.tsx | 32 +++++++++++++++---------------
 2 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/.dumi/hooks/useMenu.tsx b/.dumi/hooks/useMenu.tsx
index e0a66b317a..244471e7cf 100644
--- a/.dumi/hooks/useMenu.tsx
+++ b/.dumi/hooks/useMenu.tsx
@@ -1,15 +1,14 @@
-import type { ReactNode } from 'react';
-import React, { useMemo } from 'react';
 import type { MenuProps } from 'antd';
-import { useFullSidebarData, useSidebarData } from 'dumi';
 import { Tag, theme } from 'antd';
-import useLocation from './useLocation';
+import { useFullSidebarData, useSidebarData } from 'dumi';
+import React, { useMemo } from 'react';
 import Link from '../theme/common/Link';
+import useLocation from './useLocation';
 
-export type UseMenuOptions = {
-  before?: ReactNode;
-  after?: ReactNode;
-};
+export interface UseMenuOptions {
+  before?: React.ReactNode;
+  after?: React.ReactNode;
+}
 
 const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] => {
   const fullData = useFullSidebarData();
@@ -145,7 +144,7 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
         return result;
       }, []) ?? []
     );
-  }, [sidebarData, fullData, pathname, search]);
+  }, [sidebarData, fullData, pathname, search, options]);
 
   return [menuItems, pathname];
 };
diff --git a/.dumi/theme/common/PrevAndNext.tsx b/.dumi/theme/common/PrevAndNext.tsx
index d36fc77132..484e756b36 100644
--- a/.dumi/theme/common/PrevAndNext.tsx
+++ b/.dumi/theme/common/PrevAndNext.tsx
@@ -1,10 +1,10 @@
-import type { ReactElement } from 'react';
-import React, { useMemo } from 'react';
-import type { MenuProps } from 'antd';
-import type { MenuItemType } from 'antd/es/menu/hooks/useItems';
 import { LeftOutlined, RightOutlined } from '@ant-design/icons';
+import type { MenuProps } from 'antd';
 import { createStyles, css } from 'antd-style';
+import type { MenuItemType } from 'antd/es/menu/hooks/useItems';
 import classNames from 'classnames';
+import type { ReactElement } from 'react';
+import React, { useMemo } from 'react';
 import useMenu from '../../hooks/useMenu';
 
 const useStyle = createStyles(({ token }) => {
@@ -44,15 +44,15 @@ const useStyle = createStyles(({ token }) => {
 
       .footer-nav-icon-before {
         position: relative;
-        margin-inline-end: 1em;
-        vertical-align: middle;
         line-height: 0;
-        right: 0;
-        transition: right 0.3s;
+        vertical-align: middle;
+        transition: inset-inline-end 0.3s;
+        margin-inline-end: 1em;
+        inset-inline-end: 0;
       }
 
       &:hover .footer-nav-icon-before {
-        right: 0.2em;
+        inset-inline-end: 0.2em;
       }
     `,
     nextNav: css`
@@ -64,16 +64,16 @@ const useStyle = createStyles(({ token }) => {
 
       .footer-nav-icon-after {
         position: relative;
-        margin-inline-start: 1em;
         margin-bottom: 1px;
-        vertical-align: middle;
         line-height: 0;
-        left: 0;
-        transition: left 0.3s;
+        vertical-align: middle;
+        transition: inset-inline-start 0.3s;
+        margin-inline-start: 1em;
+        inset-inline-start: 0;
       }
 
       &:hover .footer-nav-icon-after {
-        left: 0.2em;
+        inset-inline-start: 0.2em;
       }
     `,
   };
@@ -100,8 +100,8 @@ const PrevAndNext: React.FC<{ rtl?: boolean }> = ({ rtl }) => {
   const beforeProps = { className: 'footer-nav-icon-before' };
   const afterProps = { className: 'footer-nav-icon-after' };
 
-  const before = rtl ? <LeftOutlined {...beforeProps} /> : <RightOutlined {...beforeProps} />;
-  const after = rtl ? <RightOutlined {...afterProps} /> : <LeftOutlined {...afterProps} />;
+  const before = rtl ? <RightOutlined {...beforeProps} /> : <LeftOutlined {...beforeProps} />;
+  const after = rtl ? <LeftOutlined {...afterProps} /> : <RightOutlined {...afterProps} />;
 
   const [menuItems, selectedKey] = useMenu({ before, after });