Skip to content

sujata / advithconsulting.io-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 32a75729 by JayGuri
Options

Modified mega menu behaviour to onHover

1 parent 479ea303
Inline Side-by-side
Showing 1 changed file with 46 additions and 37 deletions
layout/Header.js
...@@ -175,51 +175,35 @@ const Header = () => { ...@@ -175,51 +175,35 @@ const Header = () => {
</Link> </Link>
</li> </li>
<li className="nav-item"> {/* Wrap both the Client Servicing nav item and the mega menu in a parent div for hover logic */}
<button <li
onClick={() => setClientServicingOpen(!clientServicingOpen)} className="nav-item"
onMouseEnter={() => setClientServicingOpen(true)}
onMouseLeave={() => setClientServicingOpen(false)}
>
<span
className="nav-link dropdown-nav" className="nav-link dropdown-nav"
style={{ background: "none", border: "none", cursor: "pointer" }} style={{ background: "none", border: "none", cursor: "pointer" }}
> >
Client Servicing Client Servicing
<span className="dropdown-arrow"></span> <span className="dropdown-arrow"></span>
</button> </span>
</li> </li>
{clientServicingOpen && (
<li className="nav-item">
<Link href="/industry" className={`nav-link ${isActive("/industry") ? "active" : ""}`}>
Industry
</Link>
</li>
<li className="nav-item">
<Link href="/career" className={`nav-link ${isActive("/career") ? "active" : ""}`}>
Careers
</Link>
</li>
<li className="nav-item">
<Link href="/contact" className={`nav-link ${isActive("/contact") ? "active" : ""}`}>
Contact Us
</Link>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
{/* Overlay for closing menus */}
<div <div
className={`mega-overlay ${clientServicingOpen ? "show" : ""}`} className="mega-menu show"
onClick={() => { style={{
setClientServicingOpen(false) position: 'fixed',
left: 0,
top: 'calc(64px + 1px)', // adjust 64px to your header height if needed
width: '100vw',
zIndex: 1000,
background: '#fff',
boxShadow: '0 2px 8px rgba(0,0,0,0.08)'
}} }}
></div> onMouseEnter={() => setClientServicingOpen(true)}
onMouseLeave={() => setClientServicingOpen(false)}
{/* Client Servicing Mega Menu */} >
<div className={`mega-menu ${clientServicingOpen ? "show" : ""}`}>
<div className="mega-menu-content"> <div className="mega-menu-content">
<div className="mega-grid client-servicing-grid"> <div className="mega-grid client-servicing-grid">
{clientServices.map((service, index) => ( {clientServices.map((service, index) => (
...@@ -245,6 +229,31 @@ const Header = () => { ...@@ -245,6 +229,31 @@ const Header = () => {
</div> </div>
</div> </div>
</div> </div>
)}
<li className="nav-item">
<Link href="/industry" className={`nav-link ${isActive("/industry") ? "active" : ""}`}>
Industry
</Link>
</li>
<li className="nav-item">
<Link href="/career" className={`nav-link ${isActive("/career") ? "active" : ""}`}>
Careers
</Link>
</li>
<li className="nav-item">
<Link href="/contact" className={`nav-link ${isActive("/contact") ? "active" : ""}`}>
Contact Us
</Link>
</li>
</ul>
</div>
</nav>
</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!