nav · neumorphic · 灵感来源：Neumorphism（外壳同色浮起，内部靠文字与激活色区分）
active = components
Neumorphic Top Navigation · 拟态导航 · 导航 / Neumorphic
做一个 Neumorphic Top Navigation（拟态导航）：
- 外壳同色浮起（一组外双阴影），无边框无模糊
- 导航项 hover 提亮到 --neuro-light，激活项 accent 实底
- logo / actions 为 slot，外部内容全定制
- overflow-x-auto 保住窄屏可用
用这些 CSS 变量：--color-accent --color-bg --color-text --color-text-muted --neuro-bg --neuro-light --neuro-shadow
灵感参考：Neumorphism（外壳同色浮起，内部靠文字与激活色区分）--color-accent --color-bg --color-text --color-text-muted --neuro-bg --neuro-light --neuro-shadow
焦点
（尚未接进整页场景）
/r/nav--neumorphic.json
免外壳的 markdown 版：/llms/components/nav--neumorphic.md--neuro-bg + --neuro-shadow 浮起，没有边框与模糊--neuro-light；激活项保留 accent 实底（导航是动作语义）限制：外壳与页面同色，导航条本身的边界靠阴影；紧贴同类拟态面板放置时两层阴影会互相干扰。
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，
* 外壳同色浮起（外双阴影），没有边框与模糊；激活项仍用 accent 实底。
*/
export function NeumorphicNav({
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-lg
bg-[var(--neuro-bg)]
shadow-[var(--neuro-shadow)]
"
>
{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-md 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(--neuro-light)]'
}
`}
>
{item.label}
</button>
);
})}
</div>
{actions && <div className="px-2">{actions}</div>}
</nav>
);
}
src/components/nav/neumorphic/