Skip to content

sujata / advithconsulting.io-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 9dc70107 by JayGuri
Options

Modified Navbar

1 parent 32a75729
Inline Side-by-side
Showing 2 changed files with 51 additions and 26 deletions
.vscode/settings.json 0 → 100644
{
"postman.settings.dotenv-detection-notification-visibility": false
}
\ No newline at end of file \ No newline at end of file
layout/Header.js
...@@ -83,26 +83,35 @@ const Header = () => { ...@@ -83,26 +83,35 @@ const Header = () => {
title: "Digital Transformation", title: "Digital Transformation",
href: "/client-servicing/ba", href: "/client-servicing/ba",
items: [ items: [
{ name: "ITeC App", href: "/client-servicing/ba" }, // { name: "ITeC App", href: "/client-servicing/ba" },
{ name: "Digital Process Automation", href: "/client-servicing/ba" }, // { name: "Digital Process Automation", href: "/client-servicing/ba" },
], ],
}, },
{ {
title: "Empowering Finance Consultants", title: "Empowering Finance Consultants",
href: "/client-servicing/ba", href: "/client-servicing/ba",
items: [{ name: "CA/CPA firm services", href: "/client-servicing/ba" }], items: [
// { name: "CA/CPA firm services", href: "/client-servicing/ba" }
],
}, },
{ {
title: "Bespoke Services", title: "Bespoke Services",
href: "/client-servicing/ba", href: "/client-servicing/ba",
items: [ items: [
{ name: "Data analysis and reporting", href: "/client-servicing/ba" }, // { name: "Data analysis and reporting", href: "/client-servicing/ba" },
{ name: "Admin and Backend Support Services", href: "/client-servicing/ba" }, // { name: "Admin and Backend Support Services", href: "/client-servicing/ba" },
{ name: "PFM", href: "/client-servicing/ba" }, // { name: "PFM", href: "/client-servicing/ba" },
], ],
}, },
] ]
// Group the last four services into one column
const megaMenuColumns = [
[clientServices[0]], // Virtual Finance Office
[clientServices[1]], // Advisory Services
[clientServices[2], clientServices[3], clientServices[4], clientServices[5]], // GCC as a Service, Digital Transformation, Empowering Finance Consultants, Bespoke Services
];
return ( return (
<> <>
...@@ -113,7 +122,7 @@ const Header = () => { ...@@ -113,7 +122,7 @@ const Header = () => {
</div> </div>
<div id="navbar" className="navbar-area"> <div id="navbar" className="navbar-area">
<div className="zixon-nav"> <div className="zixon-nav">
<div className="container-fluid"> <div className="container-fluid" style={{ maxWidth: 1200, margin: '0 auto', padding: '0 32px' }}>
<nav className="navbar navbar-expand-md navbar-light"> <nav className="navbar navbar-expand-md navbar-light">
<Link href="/" className="navbar-brand"> <Link href="/" className="navbar-brand">
<Image width={144} height={33} src="/images/logo.png" alt="logo" /> <Image width={144} height={33} src="/images/logo.png" alt="logo" />
...@@ -205,25 +214,38 @@ const Header = () => { ...@@ -205,25 +214,38 @@ const Header = () => {
onMouseLeave={() => setClientServicingOpen(false)} onMouseLeave={() => setClientServicingOpen(false)}
> >
<div className="mega-menu-content"> <div className="mega-menu-content">
<div className="mega-grid client-servicing-grid"> <div className="mega-grid client-servicing-grid" style={{ display: 'flex', gap: '32px', justifyContent: 'center' }}>
{clientServices.map((service, index) => ( {megaMenuColumns.map((column, colIdx) => (
<div key={index} className="mega-column"> <div
<div className="service-header"> key={colIdx}
<Link href={service.href} className="mega-column-title" style={{ fontWeight: 'bold', fontFamily: 'inherit' }}> className="mega-column"
<strong>{service.title}</strong> style={colIdx === 2
</Link> ? { minWidth: 260, gap: 8, display: 'flex', flexDirection: 'column' }
</div> : { minWidth: 260, display: 'flex', flexDirection: 'column' }}
{service.items.length > 0 && ( >
<ul className="mega-column-list"> {column.map((service, idx) => (
{service.items.map((item, itemIndex) => ( <div
<li key={itemIndex}> key={service.title}
<Link href={item.href} className={`${isActive(item.href) ? "active" : ""}`}> className="service-header"
{item.name} style={colIdx < 2 ? { display: 'block', marginBottom: 8 } : { marginBottom: 8 }}
</Link> >
</li> <Link href={service.href} className="mega-column-title" style={{ fontWeight: 'bold', fontFamily: 'inherit', borderBottom: '2px solid #f5c542', paddingBottom: 4, display: 'inline-block', marginBottom: 8, fontSize: '1rem' }}>
))} <strong>{service.title}</strong>
</ul> </Link>
)} {/* Only show subpoints for the first two columns */}
{colIdx < 2 && service.items.length > 0 && (
<ul className="mega-column-list">
{service.items.map((item, itemIndex) => (
<li key={itemIndex}>
<Link href={item.href} className={`${isActive(item.href) ? "active" : ""}`}>
{item.name}
</Link>
</li>
))}
</ul>
)}
</div>
))}
</div> </div>
))} ))}
</div> </div>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!