nav · minimal · 灵感来源：Linear 顶部 nav 的平面化处理（去材质，留结构）
active = components
Flat Top Navigation · 极简导航 · 导航 / Minimal
做一个 Flat Top Navigation（极简导航）：
- 白底 + 发丝边外壳，圆角收到 --radius-md
- 导航项 hover 只加页面底色，激活项 accent 实底
- logo / actions 为 slot，外部内容全定制
- overflow-x-auto 保住窄屏可用
用这些 CSS 变量：--color-accent --color-bg --color-divider --color-surface --color-text --color-text-muted --shadow-sm
灵感参考：Linear 顶部 nav 的平面化处理（去材质，留结构）--color-accent --color-bg --color-divider --color-surface --color-text --color-text-muted --shadow-sm
焦点
（尚未接进整页场景）
/r/nav--minimal.json
免外壳的 markdown 版：/llms/components/nav--minimal.md--color-divider 发丝边 + --shadow-sm，圆角收到 rounded-md对比玻璃导航：少了 backdrop-blur 与内高光，外壳在任何背景上都稳定；代价是不再"浮"在内容之上。
import { type ReactNode } from 'react';
export interface NavItem {
id: string;
label: string;
href?: string;
}
interface Props {
logo?: ReactNode;
items: NavItem[];
activeId?: string;
onSelect?: (id: string) => void;
actions?: ReactNode;
}
/**
* 极简导航：与玻璃导航同一份 props，
* 外壳是白底 + 发丝边的直边条，active 仍是 accent 实底——层级只靠边界与颜色。
*/
export function MinimalNav({
logo,
items,
activeId,
onSelect,
actions,
}: Props) {
return (
<nav
className="
flex items-center gap-1 max-w-full overflow-x-auto
px-2 py-1.5
rounded-md
bg-[var(--color-surface)] border border-[var(--color-divider)]
shadow-[var(--shadow-sm)]
"
>
{logo && <div className="px-3">{logo}</div>}
<div className="flex items-center gap-0.5 min-w-max">
{items.map((item) => {
const isActive = item.id === activeId;
return (
<button
key={item.id}
type="button"
onClick={() => onSelect?.(item.id)}
className={`
press-feedback px-3 py-1.5 rounded-sm text-sm whitespace-nowrap
transition-colors
${isActive
? 'bg-[var(--color-accent)] text-[var(--color-bg)] font-medium'
: 'text-[var(--color-text-muted)] hover:text-[var(--color-text)] hover:bg-[var(--color-bg)]'
}
`}
>
{item.label}
</button>
);
})}
</div>
{actions && <div className="px-2">{actions}</div>}
</nav>
);
}
src/components/nav/minimal/