jeffrey/wwwfiberdirekt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: tighten mega menu spacing, bump link sizes

Browse Source
This commit is contained in:
Jeffrey 2026-02-23 09:40:53 +01:00
parent 488662fcbe
commit 50c5e200c3
1 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/Header/Nav/index.tsx
View File

@ -162,7 +162,7 @@ const MegaMenuPanel: React.FC<{
style={{ top }} style={{ top }}
> >
<div className="max-w-[1200px] mx-auto px-6 md:px-8 py-10 md:py-14"> <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 */} {/* Left: category title */}
<div> <div>
@ -172,23 +172,23 @@ const MegaMenuPanel: React.FC<{
</div> </div>
{/* Right: columns */} {/* 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) => ( {columns.map((col, ci) => (
<div key={ci}> <div key={ci}>
{col.heading && ( {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} {col.heading}
</p> </p>
)} )}
<ul className="flex flex-col gap-1"> <ul className="flex flex-col gap-0">
{col.links.map((link, li) => ( {col.links.map((link, li) => (
<li key={li}> <li key={li}>
<Link <Link
href={resolveHref(link)} href={resolveHref(link)}
onClick={onClose} onClick={onClose}
className={`block py-1.5 transition-colors duration-150 ${ className={`block py-1 transition-colors duration-150 ${
col.heading 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' : 'font-joey-bold text-fd-h3 text-fd-navy dark:text-white hover:text-fd-yellow dark:hover:text-fd-yellow'
}`} }`}
> >