feat: tighten mega menu spacing, bump link sizes
This commit is contained in:
parent
488662fcbe
commit
50c5e200c3
@ -162,7 +162,7 @@ const MegaMenuPanel: React.FC<{
|
||||
style={{ top }}
|
||||
>
|
||||
<div className="max-w-[1200px] mx-auto px-6 md:px-8 py-10 md:py-14">
|
||||
<div className="grid grid-cols-1 md:grid-cols-[200px_1fr] gap-8 md:gap-12 lg:gap-20">
|
||||
<div className="grid grid-cols-1 md:grid-cols-[200px_1fr] gap-8 md:gap-12">
|
||||
|
||||
{/* Left: category title */}
|
||||
<div>
|
||||
@ -172,23 +172,23 @@ const MegaMenuPanel: React.FC<{
|
||||
</div>
|
||||
|
||||
{/* Right: columns */}
|
||||
<div className={`grid gap-10 ${columns.length === 1 ? 'grid-cols-1' : columns.length === 2 ? 'grid-cols-2' : 'grid-cols-3'}`}>
|
||||
<div className={`grid gap-6 ${columns.length === 1 ? 'grid-cols-1' : columns.length === 2 ? 'grid-cols-2' : 'grid-cols-3'}`}>
|
||||
{columns.map((col, ci) => (
|
||||
<div key={ci}>
|
||||
{col.heading && (
|
||||
<p className="font-joey-medium text-fd-small text-fd-navy/40 dark:text-white/40 uppercase tracking-widest mb-4">
|
||||
<p className="font-joey-medium text-fd-small text-fd-navy/40 dark:text-white/40 uppercase tracking-widest mb-2">
|
||||
{col.heading}
|
||||
</p>
|
||||
)}
|
||||
<ul className="flex flex-col gap-1">
|
||||
<ul className="flex flex-col gap-0">
|
||||
{col.links.map((link, li) => (
|
||||
<li key={li}>
|
||||
<Link
|
||||
href={resolveHref(link)}
|
||||
onClick={onClose}
|
||||
className={`block py-1.5 transition-colors duration-150 ${
|
||||
className={`block py-1 transition-colors duration-150 ${
|
||||
col.heading
|
||||
? 'font-joey text-fd-body text-fd-navy/75 dark:text-white/70 hover:text-fd-navy dark:hover:text-fd-yellow'
|
||||
? 'font-joey-medium text-lg text-fd-navy/80 dark:text-white/75 hover:text-fd-navy dark:hover:text-fd-yellow'
|
||||
: 'font-joey-bold text-fd-h3 text-fd-navy dark:text-white hover:text-fd-yellow dark:hover:text-fd-yellow'
|
||||
}`}
|
||||
>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user