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
+40 -22
View File
@@ -55,30 +55,32 @@ export default function Header() {
</Link>
{/* Desktop nav — small caps, wide tracking (visible at >= 1240px) */}
<div className="hidden items-center gap-7 desktop:flex">
<nav className="flex items-center gap-7" aria-label="주 메뉴">
{navItems.map((item) => (
<div className="hidden items-center gap-4 desktop:flex">
<nav className="flex items-center gap-2" aria-label="주 메뉴">
{navItems.map((item) => {
const active = isActive(item.href);
return (
<Link
key={item.href}
href={item.href}
className={`group relative flex items-baseline gap-1.5 text-[0.78rem] font-semibold uppercase tracking-[0.18em] transition-colors ${
isActive(item.href)
? "text-vermillion"
: "text-ink hover:text-vermillion"
aria-current={active ? "page" : undefined}
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"
: "text-ink hover:text-vermillion hover:bg-paper/60"
}`}
>
<span
className={`font-display text-[0.62rem] ${
active ? "text-white/80 dark:text-ivory/80" : "text-ink-mute"
}`}
>
<span className="font-display text-[0.62rem] text-ink-mute">
{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>
))}
);
})}
</nav>
<div className="h-4 w-px bg-line" aria-hidden="true" />
<ThemeToggle />
@@ -113,26 +115,42 @@ export default function Header() {
className="border-t border-ink bg-ivory desktop:hidden"
aria-label="모바일 메뉴"
>
<ul className="container-content flex flex-col divide-y divide-line py-2">
{navItems.map((item) => (
<ul className="container-content flex flex-col py-2">
{navItems.map((item) => {
const active = isActive(item.href);
return (
<li key={item.href}>
<Link
href={item.href}
onClick={() => setOpen(false)}
className={`flex items-baseline justify-between py-4 transition ${
isActive(item.href) ? "text-vermillion" : "text-ink"
aria-current={active ? "page" : undefined}
className={`flex items-baseline justify-between px-4 py-3.5 transition-colors rounded-md my-1 ${
active
? "bg-vermillion text-white font-bold dark:bg-vermillion dark:text-ivory shadow-sm"
: "text-ink hover:bg-paper/60"
}`}
>
<span className="flex items-baseline gap-3">
<span className="font-display text-xs text-ink-mute">{item.no}</span>
<span
className={`font-display text-xs ${
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] text-ink-mute">
<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>
</nav>
)}