Skip to content

Commit be0ade8

Browse files
Soumyodeep-DasSoumyodeep-Das
committed
modify: Navbar Revamped
Signed-off-by: Soumyodeep-Das <[email protected]>
1 parent d9f5b95 commit be0ade8

File tree

1 file changed

+258
-33
lines changed

1 file changed

+258
-33
lines changed

‎src/theme/Navbar/index.js

Lines changed: 258 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -77,21 +77,21 @@ const navItems = [
7777
},
7878
{
7979
title: 'Community Stories',
80-
image: 'https://keploy.io/_next/static/media/community.d62a63d8.svg',
80+
image: 'https://keploy.io/images/heart.svg',
8181
href: 'https://www.g2.com/products/keploy/reviews',
8282
height: '160px',
8383
width: '200px',
8484
},
8585
{
8686
title: 'Tutorials',
87-
image: 'https://keploy.io/_next/static/media/tutorials.7666a675.svg',
87+
image: 'https://keploy.io/images/book.svg',
8888
href: 'https://www.youtube.com/playlist?list=PLuImHQnqnB_b3MbF1_873XeMhXkaZPpwV',
8989
height: '160px',
9090
width: '200px',
9191
},
9292
{
9393
title: 'Migration Guide',
94-
image: 'https://keploy.io/_next/static/media/migration.8de1314d.svg',
94+
image: 'https://keploy.io/images/user-manual.svg',
9595
href: 'https://keploy.io/blog/technology/migration-guide-from-restassured-to-keploy',
9696
height: '160px',
9797
width: '200px',
@@ -125,14 +125,14 @@ const navItems = [
125125
},
126126
{
127127
title: 'Contact Us',
128-
image: 'https://keploy.io/_next/static/media/contact.8d4fbcb2.svg',
128+
image: 'https://keploy.io/_next/static/media/resource-1.500a7b0a.svg',
129129
href: 'https://calendar.google.com/calendar/u/0/appointments/schedules/AcZssZ2l-psdTCNCLYAJ-Jt5ESyGP7gi1_U70ySTjtFNr0Kmx5UagNJnyzg7lNjA3NKnaP6qFfpAgcdZ',
130130
height: '140px',
131131
width: '180px',
132132
},
133133
{
134134
title: 'Community Forum',
135-
image: 'https://keploy.io/_next/static/media/community-forum.f92d4c5e.svg',
135+
image: 'https://keploy.io/_next/static/media/resource-2.b09d3d88.svg',
136136
href: 'https://github.com/keploy',
137137
height: '140px',
138138
width: '180px',
@@ -305,37 +305,262 @@ export default function Navbar() {
305305
)}
306306
</div>
307307
))}
308-
309-
{/* Mega menu dropdown - with hover handling */}
308+
309+
{/* Mega menu dropdown - custom layout for each menu */}
310310
{openMenu && navItems.find(item => item.label === openMenu)?.megaMenu && (
311-
<div
312-
className="absolute left-0 top-14 min-w-max backdrop-blur-md bg-white/3 rounded-2xl shadow-2xl p-6 flex gap-6 animate-fade-in z-50"
313-
onMouseEnter={() => {
314-
if (timeoutRef.current) {
315-
clearTimeout(timeoutRef.current);
316-
}
317-
}}
311+
<div
312+
className={`absolute left-0 top-14 w-full max-w-[1400px] min-h-[440px] flex rounded-2xl shadow-2xl p-6 animate-fade-in z-50 backdrop-blur-md ${isDarkTheme ? 'bg-[#18181b]/60' : 'bg-white/60'}`}
313+
onMouseEnter={() => { if (timeoutRef.current) clearTimeout(timeoutRef.current); }}
318314
onMouseLeave={handleMouseLeave}
315+
style={{ justifyContent: 'center' }}
319316
>
320-
<div className="grid grid-cols-3 gap-6">
321-
{navItems.find(item => item.label === openMenu).megaMenu.map((card) => (
322-
<Link
323-
to={card.href}
324-
key={card.title}
325-
className="relative group w-[340px] h-[280px] overflow-hidden rounded-2xl shadow-md border border-orange-200 dark:border-orange-700 transition-transform duration-200 hover:scale-[1.02]"
326-
>
327-
<img
328-
src={card.image}
329-
alt={card.title}
330-
className="absolute inset-0 w-full h-full object-cover opacity-90 group-hover:opacity-100 transition-opacity duration-300"
331-
/>
332-
<div className="absolute inset-0 p-4 flex flex-col justify-end">
333-
<div className="text-gray-800 font-semibold text-lg">{card.title}</div>
334-
<div className="text-sm text-gray-700 mt-1">{card.description}</div>
335-
</div>
336-
</Link>
337-
))}
338-
</div>
317+
{/* PRODUCTS: 2x2 grid, large left card, two stacked right cards */}
318+
{openMenu === 'Products' && (
319+
<div className="flex w-full gap-6">
320+
{/* Left Half */}
321+
<div className="flex flex-col gap-6 w-1/2">
322+
<Link
323+
to={navItems[0].megaMenu[0].href}
324+
className="relative group flex-1 rounded-2xl border border-orange-200 bg-white shadow-md overflow-hidden hover:scale-[1.02] transition-transform"
325+
style={{ height: navItems[0].megaMenu[0].height }}
326+
>
327+
<img
328+
src={navItems[0].megaMenu[0].image}
329+
alt={navItems[0].megaMenu[0].title}
330+
className="absolute inset-0 w-full h-full object-contain"
331+
/>
332+
<div className="absolute inset-0 bg-gradient-to-b from-transparent to-orange-50 p-6 flex flex-col justify-start text-left">
333+
<div className="text-gray-900 font-semibold text-xl">
334+
{navItems[0].megaMenu[0].title}
335+
</div>
336+
<div className="text-xs text-gray-600 mt-1">
337+
{navItems[0].megaMenu[0].description}
338+
</div>
339+
</div>
340+
</Link>
341+
</div>
342+
343+
{/* Right Half */}
344+
<div className="flex flex-col gap-6 w-1/2">
345+
{[1, 2].map((idx) => (
346+
<Link
347+
key={navItems[0].megaMenu[idx].title}
348+
to={navItems[0].megaMenu[idx].href}
349+
className="relative group flex-1 rounded-2xl border border-orange-200 bg-white shadow-md overflow-hidden hover:scale-[1.02] transition-transform"
350+
style={{ height: navItems[0].megaMenu[idx].height }}
351+
>
352+
<img
353+
src={navItems[0].megaMenu[idx].image}
354+
alt={navItems[0].megaMenu[idx].title}
355+
className="absolute inset-0 w-full h-full object-contain"
356+
/>
357+
<div className="absolute inset-0 bg-gradient-to-b from-transparent to-orange-50 p-6 flex flex-col justify-start text-left">
358+
<div className="text-gray-900 font-semibold text-lg">
359+
{navItems[0].megaMenu[idx].title}
360+
</div>
361+
<div className="text-xs text-gray-600 mt-1">
362+
{navItems[0].megaMenu[idx].description}
363+
</div>
364+
</div>
365+
</Link>
366+
))}
367+
</div>
368+
</div>
369+
)}
370+
371+
{/* SOLUTIONS: 3 cards in a row, each with a white background, orange border, rounded corners, shadow, and proper spacing */}
372+
{openMenu === 'Solutions' && (
373+
<div className="flex w-full gap-1 justify-center">
374+
<div className="grid grid-cols-3 gap-4 w-auto">
375+
{navItems[1].megaMenu.map((card) => (
376+
<Link
377+
key={card.title}
378+
to={card.href}
379+
className="relative group rounded-2xl border-2 border-orange-200 bg-gradient-to-b from-white to-orange-50 overflow-hidden hover:scale-[1.03] transition-transform"
380+
style={{ height: '360px', width: '200px' }}
381+
>
382+
{/* Image as background layer */}
383+
<img
384+
src={card.image}
385+
alt={card.title}
386+
className="w-full h-full object-contain"
387+
/>
388+
389+
{/* Overlay text container */}
390+
<div className="absolute inset-0 p-4 flex flex-col justify-start items-start text-left">
391+
<div className="text-gray-900 font-semibold text-lg">{card.title}</div>
392+
{card.description && (
393+
<div className="text-gray-700 text-sm mt-1">{card.description}</div>
394+
)}
395+
</div>
396+
</Link>
397+
))}
398+
</div>
399+
</div>
400+
401+
)}
402+
{/* DEVELOPERS: 2 large cards left, 3 stacked right cards */}
403+
{openMenu === 'Developers' && (
404+
<div className="flex w-full gap-6">
405+
{/* Left Column (Large Cards) */}
406+
<div className="flex gap-6 w-2/3">
407+
{[0, 1].map((idx) => (
408+
<Link
409+
key={navItems[2].megaMenu[idx].title}
410+
to={navItems[2].megaMenu[idx].href}
411+
className="relative group flex-1 rounded-2xl border border-orange-200 bg-white overflow-hidden hover:scale-[1.02] transition-transform"
412+
>
413+
<img
414+
src={navItems[2].megaMenu[idx].image}
415+
alt={navItems[2].megaMenu[idx].title}
416+
className="absolute inset-0 w-full h-full object-contain"
417+
/>
418+
<div className="absolute inset-0 bg-gradient-to-b from-transparent to-orange-50 p-6 flex flex-col justify-start text-left">
419+
<div className="text-gray-900 font-semibold text-lg">
420+
{navItems[2].megaMenu[idx].title}
421+
</div>
422+
{navItems[2].megaMenu[idx].description && (
423+
<div className="text-xs text-gray-600 mt-1">
424+
{navItems[2].megaMenu[idx].description}
425+
</div>
426+
)}
427+
</div>
428+
</Link>
429+
))}
430+
</div>
431+
432+
{/* Right Column (Horizontal Row Cards) */}
433+
<div className="flex flex-col gap-4 w-1/3">
434+
{[2, 3, 4].map(idx => (
435+
<Link key={navItems[2].megaMenu[idx].title} to={navItems[2].megaMenu[idx].href} className="relative group flex-1 rounded-2xl border-2 border-orange-200 bg-gradient-to-b from-white to-orange-50 overflow-hidden hover:scale-[1.02] transition-transform flex flex-row items-center" style={{ height: navItems[2].megaMenu[idx].height }}>
436+
<img src={navItems[2].megaMenu[idx].image} alt={navItems[2].megaMenu[idx].title} className="w-8 h-8 ml-4" />
437+
<div className="ml-4">
438+
<div className="text-gray-700 font-semibold text-md">{navItems[2].megaMenu[idx].title}</div>
439+
<div className="text-xs text-gray-600">{navItems[2].megaMenu[idx].description || ''}</div>
440+
</div>
441+
</Link>
442+
))}
443+
</div>
444+
</div>
445+
)}
446+
447+
{/* RESOURCES: 2x2 grid left, 2 stacked right cards */}
448+
{openMenu === 'Resources' && (
449+
<div className="flex w-full gap-6">
450+
{/* Left: 2x2 grid of image cards */}
451+
{/* Left Column (cards 0 and 1) */}
452+
<div className="flex flex-col gap-6 w-1/3">
453+
{[0, 1].map((idx) => {
454+
const card = navItems[4].megaMenu[idx];
455+
if (!card) return null;
456+
return (
457+
<Link
458+
key={card.title}
459+
to={card.href}
460+
className="relative group flex-1 rounded-2xl border border-orange-200 bg-white shadow-md overflow-hidden hover:scale-[1.02] transition-transform"
461+
style={{ height: card.height, minHeight: '80px' }}
462+
>
463+
<img
464+
src={card.image}
465+
alt={card.title}
466+
className="absolute inset-0 w-full h-full object-cover"
467+
/>
468+
<div className="absolute inset-0 bg-gradient-to-b from-transparent to-orange-50 p-4 flex flex-col justify-end text-left">
469+
<div className="text-gray-700 font-semibold text-lg drop-shadow-md">{card.title}</div>
470+
{card.description && (
471+
<div className="text-sm text-gray-600 mt-1">{card.description}</div>
472+
)}
473+
</div>
474+
</Link>
475+
);
476+
})}
477+
</div>
478+
479+
{/* Center Column (card 2) */}
480+
<div className="flex flex-col gap-6 w-1/3">
481+
{[2].map((idx) => {
482+
const card = navItems[4].megaMenu[idx];
483+
if (!card) return null;
484+
return (
485+
<Link
486+
key={card.title}
487+
to={card.href}
488+
className="relative group flex-1 rounded-2xl border border-orange-200 bg-white shadow-md overflow-hidden hover:scale-[1.02] transition-transform"
489+
style={{ height: card.height, minHeight: '170px' }}
490+
>
491+
<img
492+
src={card.image}
493+
alt={card.title}
494+
className="absolute inset-0 w-full h-full object-cover"
495+
/>
496+
<div className="absolute inset-0 bg-gradient-to-b from-transparent to-orange-50 p-4 flex flex-col justify-end text-left">
497+
<div className="text-gray-700 font-semibold text-lg drop-shadow-md">{card.title}</div>
498+
{card.description && (
499+
<div className="text-sm text-gray-600 mt-1">{card.description}</div>
500+
)}
501+
</div>
502+
</Link>
503+
);
504+
})}
505+
</div>
506+
507+
{/* Right Column (cards 3 and 4, horizontal layout) */}
508+
<div className="flex flex-col gap-6 w-1/3">
509+
{[3, 4].map((idx) => {
510+
const card = navItems[4].megaMenu[idx];
511+
if (!card) return null;
512+
513+
return (
514+
<Link
515+
key={card.title}
516+
to={card.href}
517+
className="relative group flex-1 rounded-2xl border border-orange-200 bg-white shadow-md overflow-hidden hover:scale-[1.02] transition-transform"
518+
style={{ height: card.height, minHeight: '100px' }}
519+
>
520+
{/* Background Image */}
521+
<img
522+
src={card.image}
523+
alt={card.title}
524+
className="absolute inset-0 w-full h-full object-cover"
525+
/>
526+
527+
{/* Overlay */}
528+
<div className="absolute inset-0 p-4 flex items-center gap-4 z-10">
529+
{/* Optional: Icon version of image — if not needed, remove this */}
530+
{/* <img src={card.icon} alt="" className="w-10 h-10" /> */}
531+
532+
<div className="flex-1">
533+
<div className="text-gray-700 font-semibold text-lg drop-shadow">
534+
{card.title}
535+
</div>
536+
{card.description && (
537+
<div className="text-gray-700 text-xs opacity-90 mt-1 drop-shadow-sm">
538+
{card.description}
539+
</div>
540+
)}
541+
</div>
542+
543+
{/* Arrow icon */}
544+
<svg
545+
className="min-w-[22px] min-h-[22px]"
546+
width="22"
547+
height="22"
548+
fill="none"
549+
stroke="#FF914D"
550+
strokeWidth="2.5"
551+
viewBox="0 0 24 24"
552+
>
553+
<path strokeLinecap="round" strokeLinejoin="round" d="M7 17L17 7M7 7h10v10" />
554+
</svg>
555+
</div>
556+
</Link>
557+
);
558+
})}
559+
</div>
560+
561+
562+
</div>
563+
)}
339564
</div>
340565
)}
341566
</div>

0 commit comments

Comments
 (0)