refactor(nav): 手机导航抽屉改用组件库 Drawer
- 删掉手写的抽屉(遮罩 / Esc / 标题 / 关闭按钮 / 动画)与对应 CSS - 直接用 @stash/ui 的 Drawer(原生 dialog,自带焦点陷阱、Esc、backdrop 与滚动锁) - 保留原来自定义的分组选择逻辑
This commit is contained in:
+10
-26
@@ -1,16 +1,14 @@
|
||||
import {
|
||||
Breadcrumb,
|
||||
Card,
|
||||
Drawer,
|
||||
Empty,
|
||||
EngineIcon,
|
||||
Icon,
|
||||
IconButton,
|
||||
Layout,
|
||||
Menu,
|
||||
Notice,
|
||||
SearchField,
|
||||
Space,
|
||||
Title,
|
||||
Toaster,
|
||||
type EngineIconName,
|
||||
type MenuItem,
|
||||
@@ -1042,29 +1040,15 @@ export default function AppNext() {
|
||||
|
||||
<BackToTop visible={scrolled} targetId="page-scroll" />
|
||||
|
||||
{navOpen && (
|
||||
<div className="nav-drawer">
|
||||
<button
|
||||
type="button"
|
||||
className="nav-drawer-backdrop"
|
||||
aria-label="关闭分组导航"
|
||||
onClick={() => setNavOpen(false)}
|
||||
/>
|
||||
<div className="nav-drawer-panel" role="dialog" aria-modal="true" aria-label="分组导航">
|
||||
<div className="nav-drawer-head">
|
||||
<Title level={4} as="h2" weight="semibold">
|
||||
分组导航
|
||||
</Title>
|
||||
<IconButton
|
||||
label="关闭分组导航"
|
||||
icon={<Icon name="close_line" />}
|
||||
onClick={() => setNavOpen(false)}
|
||||
/>
|
||||
</div>
|
||||
<Menu items={sidebarItems} activeKey={activeKey} itemHeight={44} onSelect={selectNav} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<Drawer
|
||||
open={navOpen}
|
||||
onClose={() => setNavOpen(false)}
|
||||
title="分组导航"
|
||||
placement="left"
|
||||
width={300}
|
||||
>
|
||||
<Menu items={sidebarItems} activeKey={activeKey} itemHeight={44} onSelect={selectNav} />
|
||||
</Drawer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user