chpark/slot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Header dropdown menu visibility fix: inline color #1f2937 + JS hover fallback

Browse Source 
The mega-menu sub-panel was rendering with invisible text on some browsers
(Tailwind class chain in v4 + framer-motion mount-time race). Switching to
inline style locks the contrast regardless of CSS-class resolution order:

- panel motion.div: explicit background:#ffffff + color:#1f2937 + z-50
- each sub-link: inline color:#1f2937 (default) and white-on-violet hover
  pushed via onMouseOver/Out as a JS fallback
- top-level mega-menu link already had explicit color:#fff with text shadow

This is defensive — no harm if Tailwind already handled it; corrects any
case where the panel showed empty.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
chpark
2026-04-29 18:32:16 +09:00
parent d008a28a82
commit 291f8bc20d
1 changed files with 9 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
next-app/apps/web/src/components/Chrome/Header.tsx
+9 -6
View File
@@ -153,12 +153,12 @@ function MegaPanel({ items }: { items: MenuItem[] }) {
const multiCol = sections.some((s) => s.links.length >= 6) || total >= 14;
return (
<div className={`grid gap-x-4 gap-y-3 ${multiCol ? 'grid-cols-3' : 'grid-cols-1'}`}>
<div className={`grid gap-x-4 gap-y-3 ${multiCol ? 'grid-cols-3' : 'grid-cols-1'}`} style={{ color: '#1f2937' }}>
{sections.map((s, si) => (
<div key={si} className="min-w-[160px]">
{s.title && (
<div className="mb-1 border-b border-brand-100 pb-1 text-[11px] font-bold uppercase tracking-widest text-brand-500">
{s.href && s.href !== '#' ? <Link href={s.href} className="hover:text-brand-700">{s.title}</Link> : s.title}
<div className="mb-1 border-b border-brand-100 pb-1 text-[11px] font-bold uppercase tracking-widest" style={{ color: '#7c3aed' }}>
{s.href && s.href !== '#' ? <Link href={s.href} style={{ color: '#7c3aed' }}>{s.title}</Link> : s.title}
</div>
)}
<ul className="m-0 grid gap-0.5 p-0 list-none">
@@ -166,7 +166,10 @@ function MegaPanel({ items }: { items: MenuItem[] }) {
<li key={ci}>
<Link
href={c.href || '#'}
className="block rounded-lg px-3 py-2 text-[13.5px] font-medium text-neutral-800 transition hover:bg-gradient-to-r hover:from-brand-600 hover:to-fuchsia-600 hover:text-white hover:shadow-[0_4px_14px_rgba(124,82,224,0.25)] whitespace-nowrap"
style={{ color: '#1f2937', display: 'block' }}
className="rounded-lg px-3 py-2 text-[13.5px] font-medium transition whitespace-nowrap hover:!text-white hover:bg-gradient-to-r hover:from-violet-600 hover:to-fuchsia-600 hover:shadow-[0_4px_14px_rgba(124,82,224,0.25)]"
onMouseOver={(e) => { e.currentTarget.style.color = '#ffffff'; }}
onMouseOut={(e) => { e.currentTarget.style.color = '#1f2937'; }}
>
{c.label}
</Link>
@@ -206,8 +209,8 @@ function MegaNav({ menus, isDark: _isDark }: { menus: MenuItem[]; isDark: boolea
{open === i && hasChildren && (
<motion.div
initial={{ opacity: 0, y: 6 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: 6 }} transition={{ duration: 0.16 }}
className="absolute left-0 top-full z-40 mt-0 rounded-2xl border border-brand-100 bg-white p-3 shadow-[0_18px_38px_rgba(60,30,120,0.22)]"
style={{ minWidth: 240 }}
className="absolute left-0 top-full z-50 mt-0 rounded-2xl border border-brand-100 p-3 shadow-[0_18px_38px_rgba(60,30,120,0.22)]"
style={{ minWidth: 240, background: '#ffffff', color: '#1f2937' }}
>
<MegaPanel items={m.children!} />
</motion.div>