lab/landing_page
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add high-contrast active page highlight badge to AppHeader

Browse Source
This commit is contained in:
Godopu
2026-07-30 22:26:09 +09:00
parent 19f3bee39f
commit f672f7af7d
1 changed files with 61 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
refer_landing_page/components/Header.tsx
+61 -43
View File
@@ -55,30 +55,32 @@ export default function Header() {
</Link> </Link>
{/* Desktop nav — small caps, wide tracking (visible at >= 1240px) */} {/* Desktop nav — small caps, wide tracking (visible at >= 1240px) */}
<div className="hidden items-center gap-7 desktop:flex"> <div className="hidden items-center gap-4 desktop:flex">
<nav className="flex items-center gap-7" aria-label="주 메뉴"> <nav className="flex items-center gap-2" aria-label="주 메뉴">
{navItems.map((item) => ( {navItems.map((item) => {
<Link const active = isActive(item.href);
key={item.href} return (
href={item.href} <Link
className={`group relative flex items-baseline gap-1.5 text-[0.78rem] font-semibold uppercase tracking-[0.18em] transition-colors ${ key={item.href}
isActive(item.href) href={item.href}
? "text-vermillion" aria-current={active ? "page" : undefined}
: "text-ink hover:text-vermillion" className={`group relative flex items-baseline gap-1.5 text-[0.78rem] font-semibold uppercase tracking-[0.18em] transition-all px-3 py-1.5 rounded-md ${
}`} active
> ? "bg-vermillion text-white shadow-sm dark:bg-vermillion dark:text-ivory font-bold"
<span className="font-display text-[0.62rem] text-ink-mute"> : "text-ink hover:text-vermillion hover:bg-paper/60"
{item.no}
</span>
<span>{item.en}</span>
<span
aria-hidden
className={`absolute -bottom-1.5 left-0 h-px bg-vermillion transition-all duration-300 ${
isActive(item.href) ? "w-full" : "w-0 group-hover:w-full"
}`} }`}
/> >
</Link> <span
))} className={`font-display text-[0.62rem] ${
active ? "text-white/80 dark:text-ivory/80" : "text-ink-mute"
}`}
>
{item.no}
</span>
<span>{item.en}</span>
</Link>
);
})}
</nav> </nav>
<div className="h-4 w-px bg-line" aria-hidden="true" /> <div className="h-4 w-px bg-line" aria-hidden="true" />
<ThemeToggle /> <ThemeToggle />
@@ -113,26 +115,42 @@ export default function Header() {
className="border-t border-ink bg-ivory desktop:hidden" className="border-t border-ink bg-ivory desktop:hidden"
aria-label="모바일 메뉴" aria-label="모바일 메뉴"
> >
<ul className="container-content flex flex-col divide-y divide-line py-2"> <ul className="container-content flex flex-col py-2">
{navItems.map((item) => ( {navItems.map((item) => {
<li key={item.href}> const active = isActive(item.href);
<Link return (
href={item.href} <li key={item.href}>
onClick={() => setOpen(false)} <Link
className={`flex items-baseline justify-between py-4 transition ${ href={item.href}
isActive(item.href) ? "text-vermillion" : "text-ink" onClick={() => setOpen(false)}
}`} aria-current={active ? "page" : undefined}
> className={`flex items-baseline justify-between px-4 py-3.5 transition-colors rounded-md my-1 ${
<span className="flex items-baseline gap-3"> active
<span className="font-display text-xs text-ink-mute">{item.no}</span> ? "bg-vermillion text-white font-bold dark:bg-vermillion dark:text-ivory shadow-sm"
<span className="headline-ko text-lg">{item.ko}</span> : "text-ink hover:bg-paper/60"
</span> }`}
<span className="text-[0.7rem] font-semibold uppercase tracking-[0.18em] text-ink-mute"> >
{item.en} <span className="flex items-baseline gap-3">
</span> <span
</Link> className={`font-display text-xs ${
</li> active ? "text-white/80 dark:text-ivory/80" : "text-ink-mute"
))} }`}
>
{item.no}
</span>
<span className="headline-ko text-lg">{item.ko}</span>
</span>
<span
className={`text-[0.7rem] font-semibold uppercase tracking-[0.18em] ${
active ? "text-white/90 dark:text-ivory/90" : "text-ink-mute"
}`}
>
{item.en}
</span>
</Link>
</li>
);
})}
</ul> </ul>
</nav> </nav>
)} )}