9b893a6c61
M1 左导航响应式抽屉：抽出 lib/nav/items.ts（条目数据+激活判定，纯逻辑+vitest） 共用于桌面静态侧栏（hidden lg:block）与移动汉堡抽屉。新增通用 Drawer（遮罩/ Esc 关闭/打开聚焦，复用 CommandPalette a11y 模式）+ NavDrawer + NavItems； LeftNav 改 <lg 隐藏，AppShell 顶栏加汉堡（aria-label 打开导航）。 M2 写作工具条不溢出 + 移动端可达章节/助手：Toolbar 改 flex-wrap，390px 不再 横切「尚未保存」；ChapterList/ChapterAssistant 抽出 *Content，Workbench 经 左/右 Drawer 在 <lg 触达目录/助手。 实景 390px 复验（browse）：汉堡显示/静态导航隐藏/抽屉开合聚焦+Esc、工具条 两行不溢出、助手抽屉真注入面板。门禁：lint/typecheck 干净 · vitest 177 · build OK。
46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
"use client";
|
||
|
||
import { useState } from "react";
|
||
|
||
import type { ActiveNav } from "@/lib/nav/items";
|
||
import { Drawer } from "./Drawer";
|
||
import { NavItems } from "./NavItems";
|
||
|
||
interface NavDrawerProps {
|
||
projectId?: string;
|
||
activeNav?: ActiveNav;
|
||
}
|
||
|
||
// 移动端导航：汉堡按钮 + 左侧抽屉（仅 <lg；桌面用 LeftNav 静态侧栏）。UX §5.1。
|
||
export function NavDrawer({ projectId, activeNav }: NavDrawerProps) {
|
||
const [open, setOpen] = useState(false);
|
||
|
||
return (
|
||
<>
|
||
<button
|
||
type="button"
|
||
onClick={() => setOpen(true)}
|
||
aria-label="打开导航"
|
||
aria-expanded={open}
|
||
className="-ml-1 rounded p-2 text-ink hover:text-cinnabar lg:hidden"
|
||
>
|
||
<span aria-hidden="true" className="block text-lg leading-none">
|
||
☰
|
||
</span>
|
||
</button>
|
||
<Drawer
|
||
open={open}
|
||
onClose={() => setOpen(false)}
|
||
side="left"
|
||
label="主导航"
|
||
>
|
||
<NavItems
|
||
projectId={projectId}
|
||
activeNav={activeNav}
|
||
onNavigate={() => setOpen(false)}
|
||
/>
|
||
</Drawer>
|
||
</>
|
||
);
|
||
}
|