refactor(nav): 手机导航抽屉改用组件库 Drawer
- 删掉手写的抽屉(遮罩 / Esc / 标题 / 关闭按钮 / 动画)与对应 CSS - 直接用 @stash/ui 的 Drawer(原生 dialog,自带焦点陷阱、Esc、backdrop 与滚动锁) - 保留原来自定义的分组选择逻辑
This commit is contained in:
+1
-54
@@ -1662,66 +1662,13 @@ html.theme-transition .site-background {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ---------- 小屏分组导航抽屉 ---------- */
|
/* ---------- 小屏分组导航(抽屉用组件库的 Drawer) ---------- */
|
||||||
|
|
||||||
/* 桌面不显示菜单按钮(抽屉只能从小屏页头打开) */
|
/* 桌面不显示菜单按钮(抽屉只能从小屏页头打开) */
|
||||||
.header-nav-toggle {
|
.header-nav-toggle {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-drawer {
|
|
||||||
position: fixed;
|
|
||||||
inset: 0;
|
|
||||||
z-index: calc(var(--su-z-header) + 10);
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-drawer-backdrop {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
border: none;
|
|
||||||
background: rgba(0, 0, 0, 0.45);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-drawer-panel {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--su-space-3);
|
|
||||||
width: min(86vw, 340px);
|
|
||||||
height: 100%;
|
|
||||||
margin-right: auto;
|
|
||||||
padding: var(--su-space-4);
|
|
||||||
background-color: var(--su-bg-card);
|
|
||||||
box-shadow: var(--su-shadow-pop);
|
|
||||||
overflow-y: auto;
|
|
||||||
animation: nav-drawer-in 180ms var(--su-ease-out);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-drawer-head {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: var(--su-space-2);
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes nav-drawer-in {
|
|
||||||
from {
|
|
||||||
transform: translateX(-100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
transform: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-reduced-motion: reduce) {
|
|
||||||
.nav-drawer-panel {
|
|
||||||
animation: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 640px) {
|
@media (max-width: 640px) {
|
||||||
/* 手机页头才显示菜单按钮(必须写在上面的 display: none 之后) */
|
/* 手机页头才显示菜单按钮(必须写在上面的 display: none 之后) */
|
||||||
.header-nav-toggle {
|
.header-nav-toggle {
|
||||||
|
|||||||
+10
-26
@@ -1,16 +1,14 @@
|
|||||||
import {
|
import {
|
||||||
Breadcrumb,
|
Breadcrumb,
|
||||||
Card,
|
Card,
|
||||||
|
Drawer,
|
||||||
Empty,
|
Empty,
|
||||||
EngineIcon,
|
EngineIcon,
|
||||||
Icon,
|
|
||||||
IconButton,
|
|
||||||
Layout,
|
Layout,
|
||||||
Menu,
|
Menu,
|
||||||
Notice,
|
Notice,
|
||||||
SearchField,
|
SearchField,
|
||||||
Space,
|
Space,
|
||||||
Title,
|
|
||||||
Toaster,
|
Toaster,
|
||||||
type EngineIconName,
|
type EngineIconName,
|
||||||
type MenuItem,
|
type MenuItem,
|
||||||
@@ -1042,29 +1040,15 @@ export default function AppNext() {
|
|||||||
|
|
||||||
<BackToTop visible={scrolled} targetId="page-scroll" />
|
<BackToTop visible={scrolled} targetId="page-scroll" />
|
||||||
|
|
||||||
{navOpen && (
|
<Drawer
|
||||||
<div className="nav-drawer">
|
open={navOpen}
|
||||||
<button
|
onClose={() => setNavOpen(false)}
|
||||||
type="button"
|
title="分组导航"
|
||||||
className="nav-drawer-backdrop"
|
placement="left"
|
||||||
aria-label="关闭分组导航"
|
width={300}
|
||||||
onClick={() => setNavOpen(false)}
|
>
|
||||||
/>
|
<Menu items={sidebarItems} activeKey={activeKey} itemHeight={44} onSelect={selectNav} />
|
||||||
<div className="nav-drawer-panel" role="dialog" aria-modal="true" aria-label="分组导航">
|
</Drawer>
|
||||||
<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>
|
|
||||||
)}
|
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user