Fix taiji fish eyes and expose theme toggle on mobile.
Correct yin-yang eye colors with contrast strokes, and show light/dark switch in mobile header with Chinese labels. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -36,19 +36,21 @@ function NavLink({ href, label }: { href: string; label: string }) {
|
||||
export default function Header() {
|
||||
return (
|
||||
<header className="relative z-10 border-b border-border/40 bg-card/70 py-3 shadow-sm backdrop-blur-md">
|
||||
<div className={`${APP_CONTAINER} flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between`}>
|
||||
<Link href="/" className="flex items-center justify-center gap-2 sm:justify-start">
|
||||
<div
|
||||
className={`${APP_CONTAINER} grid grid-cols-[1fr_auto] items-center gap-y-2 sm:flex sm:justify-between`}
|
||||
>
|
||||
<Link href="/" className="flex items-center gap-2">
|
||||
<TaijiIcon />
|
||||
<span className="font-medium tracking-wide">知命阁</span>
|
||||
</Link>
|
||||
<nav className="flex flex-wrap items-center justify-center gap-x-4 gap-y-1">
|
||||
<div className="justify-self-end sm:order-last">
|
||||
<ModeToggle />
|
||||
</div>
|
||||
<nav className="col-span-2 flex flex-wrap items-center justify-center gap-x-4 gap-y-1 sm:order-none sm:col-span-1 sm:flex-1">
|
||||
{NAV_ITEMS.map((item) => (
|
||||
<NavLink key={item.href} {...item} />
|
||||
))}
|
||||
</nav>
|
||||
<div className="flex justify-center sm:justify-end">
|
||||
<ModeToggle />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user