fix(document): improve mobile sidebar style and UX (#6464)

* fix(document): improve mobile sidebar style and UX

- Add icons to 6 navigation tabs (BookOpen, Code, Lightbulb, CircleHelp, Scale, History)
- Reduce mobile sidebar padding and separator spacing
- Fix icon container size in RootToggle dropdown (36px → 20px)
- Keep sidebar open when switching between top-level tabs
- Remove top gradient mask on mobile sidebar viewport
- Fix long URL overflow in article content on mobile
- Fix TOC popover trigger text overflow on mobile

* docs: 中国大陆 → 中国大陆版

* docs: 海外版→国际版, 国内版→中国大陆版

---------

Co-authored-by: archer <archer@archerdeMac-mini.local>
This commit is contained in:
Archer
2026-02-26 00:26:52 +08:00
committed by GitHub
parent 2e18f1ebc2
commit 6dcb5a9f46
9 changed files with 116 additions and 9 deletions

View File

@@ -71,7 +71,7 @@ const CustomFolder: FC<{ item: PageTree.Folder; level: number; children: ReactNo
};
const CustomSeparator: FC<{ item: PageTree.Separator }> = ({ item }) => (
<div className="text-sm font-semibold px-2 py-2 mt-4 mb-2">{item.name}</div>
<div className="text-sm font-semibold px-2 py-1.5 mt-1 mb-1 first:mt-0">{item.name}</div>
);
export const CustomSidebarComponents: SidebarComponents = {

View File

@@ -0,0 +1,33 @@
'use client';
import { usePathname } from 'next/navigation';
import { useRef } from 'react';
import { useSidebar } from 'fumadocs-ui/provider';
/**
* 移动端:点击一级 tab 切换时不关闭 sidebar点击二级路由时正常关闭。
*
* 在渲染阶段检测是否为 tab 间切换,是则设 closeOnRedirect = false。
*/
export function SidebarKeepOpen({ tabUrls }: { tabUrls: string[] }) {
const pathname = usePathname();
const prevPathname = useRef(pathname);
const { closeOnRedirect } = useSidebar();
if (prevPathname.current !== pathname) {
const prev = prevPathname.current;
prevPathname.current = pathname;
// 判断是否是 tab 间切换(从一个 tab 根路径跳到另一个 tab 根路径)
const prevTab = tabUrls.find((url) => prev.startsWith(url));
const currTab = tabUrls.find((url) => pathname.startsWith(url));
if (prevTab && currTab && prevTab !== currTab) {
// 一级 tab 切换 → 不关闭 sidebar
closeOnRedirect.current = false;
}
// 否则(二级路由跳转)→ 保持默认行为(关闭 sidebar
}
return null;
}