Skip to content

sujata / advithconsulting.io-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 0946a493 by JayGuri
Options

Fixed Knowledge tab of Header

1 parent 4d332a61
Inline Side-by-side
Showing 1 changed file with 97 additions and 136 deletions
layout/Header.js
...@@ -7,7 +7,6 @@ import Image from "next/image" ...@@ -7,7 +7,6 @@ import Image from "next/image"
const Header = () => { const Header = () => {
const [menu, setMenu] = useState(true) const [menu, setMenu] = useState(true)
const [knowledgeOpen, setKnowledgeOpen] = useState(false)
const [clientServicingOpen, setClientServicingOpen] = useState(false) const [clientServicingOpen, setClientServicingOpen] = useState(false)
const router = useRouter() const router = useRouter()
...@@ -18,7 +17,6 @@ const Header = () => { ...@@ -18,7 +17,6 @@ const Header = () => {
useEffect(() => { useEffect(() => {
const handleRouteChange = () => { const handleRouteChange = () => {
setMenu(true) setMenu(true)
setKnowledgeOpen(false)
setClientServicingOpen(false) setClientServicingOpen(false)
} }
...@@ -126,7 +124,8 @@ const Header = () => { ...@@ -126,7 +124,8 @@ const Header = () => {
.navbar-nav { .navbar-nav {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 2rem; gap: 0.1rem;
justify-content: flex-end;
} }
.nav-link { .nav-link {
...@@ -181,6 +180,75 @@ const Header = () => { ...@@ -181,6 +180,75 @@ const Header = () => {
background: #f4d03f; background: #f4d03f;
} }
/* Knowledge Dropdown Styles */
.knowledge-dropdown {
position: relative;
}
.dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
border-radius: 8px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
z-index: 1001;
padding: 0.5rem 0;
min-width: 200px;
list-style: none;
margin: 0;
}
.knowledge-dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-menu .nav-item {
margin: 0;
padding: 0;
}
.dropdown-menu .nav-link {
display: block;
padding: 0.7rem 1.5rem;
color: #222;
font-weight: 500;
font-size: 0.95rem;
text-decoration: none;
border-radius: 0.25rem;
background: none;
transition: color 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.dropdown-menu .nav-link.active {
color: #f6a100;
font-weight: 600;
}
.dropdown-menu .nav-link:hover {
color: #f6a100;
font-weight: 600;
background: none;
}
.dropdown-menu ul {
list-style: none;
padding: 0;
margin: 0;
padding-left: 0;
}
.dropdown-menu ul .nav-link {
padding: 0.5rem 1.5rem;
font-size: 0.9rem;
color: #4a5568;
}
.dropdown-menu ul .nav-link:hover {
color: #f6a100;
}
/* Mega Menu Styles */ /* Mega Menu Styles */
.mega-menu-container { .mega-menu-container {
position: relative; position: relative;
...@@ -218,11 +286,6 @@ const Header = () => { ...@@ -218,11 +286,6 @@ const Header = () => {
gap: 2.5rem; gap: 2.5rem;
} }
.knowledge-grid {
grid-template-columns: repeat(4, 1fr);
gap: 3rem;
}
.client-servicing-grid { .client-servicing-grid {
grid-template-columns: repeat(6, 1fr); grid-template-columns: repeat(6, 1fr);
gap: 2rem; gap: 2rem;
...@@ -259,35 +322,6 @@ const Header = () => { ...@@ -259,35 +322,6 @@ const Header = () => {
color: #1a202c; color: #1a202c;
} }
.knowledge-title {
font-size: 1.125rem;
font-weight: 700;
color: #2d3748;
padding-bottom: 0.75rem;
border-bottom: 2px solid #f6d55c;
display: block;
text-decoration: none;
line-height: 1.3;
}
.knowledge-title:hover {
color: #1a202c;
}
.service-dropdown-arrow {
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #4a5568;
transition: transform 0.2s ease;
margin-left: 0.5rem;
}
.service-dropdown-arrow.expanded {
transform: rotate(180deg);
}
.mega-column-list { .mega-column-list {
list-style: none; list-style: none;
padding: 0; padding: 0;
...@@ -296,10 +330,6 @@ const Header = () => { ...@@ -296,10 +330,6 @@ const Header = () => {
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.mega-column-list.collapsed {
display: none;
}
.mega-column-list li { .mega-column-list li {
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
} }
...@@ -346,66 +376,12 @@ const Header = () => { ...@@ -346,66 +376,12 @@ const Header = () => {
display: block; display: block;
} }
/* Knowledge Dropdown Styles */
.knowledge-dropdown {
position: relative;
}
.knowledge-dropdown-menu {
display: none;
position: absolute;
left: 0;
top: 100%;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
z-index: 1001;
padding: 0.5rem 0;
min-width: 180px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.knowledge-dropdown:hover .knowledge-dropdown-menu,
.knowledge-dropdown:focus-within .knowledge-dropdown-menu {
display: block;
}
.knowledge-dropdown-menu li {
margin: 0;
}
.knowledge-dropdown-menu a {
display: block;
padding: 0.75rem 1.2rem;
color: #000;
font-weight: 500;
font-size: 1rem;
text-decoration: none;
border-radius: 0.25rem;
transition: background-color 0.2s ease, color 0.2s ease;
}
.knowledge-dropdown-menu a:hover {
background-color: #f6a1001a; /* light tint */
color: #f6a100;
font-weight: 600;
}
.knowledge-title {
border-bottom: none;
padding-bottom: 0;
}
@media (max-width: 1200px) { @media (max-width: 1200px) {
.client-servicing-grid { .client-servicing-grid {
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 1.5rem; gap: 1.5rem;
} }
.knowledge-grid {
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
.mega-menu-content { .mega-menu-content {
padding: 2rem; padding: 2rem;
} }
...@@ -427,17 +403,11 @@ const Header = () => { ...@@ -427,17 +403,11 @@ const Header = () => {
gap: 0; gap: 0;
} }
.knowledge-grid {
grid-template-columns: 1fr;
gap: 0;
}
.mega-menu-content { .mega-menu-content {
padding: 1.5rem; padding: 1.5rem;
} }
.mega-column-title, .mega-column-title {
.knowledge-title {
font-size: 1rem; font-size: 1rem;
border-bottom: none; border-bottom: none;
padding-bottom: 0; padding-bottom: 0;
...@@ -466,17 +436,6 @@ const Header = () => { ...@@ -466,17 +436,6 @@ const Header = () => {
.service-header { .service-header {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.knowledge-grid .mega-column {
border-bottom: 1px solid #e2e8f0;
padding-bottom: 0.75rem;
margin-bottom: 0.75rem;
}
.knowledge-grid .mega-column:last-child {
border-bottom: none;
margin-bottom: 0;
}
} }
@media (max-width: 480px) { @media (max-width: 480px) {
...@@ -516,22 +475,32 @@ const Header = () => { ...@@ -516,22 +475,32 @@ const Header = () => {
{/* Knowledge Dropdown */} {/* Knowledge Dropdown */}
<li className="nav-item knowledge-dropdown"> <li className="nav-item knowledge-dropdown">
<button <Link href="/knowledge" className="dropdown-toggle nav-link">
className="nav-link dropdown-nav"
style={{ background: "none", border: "none", cursor: "pointer" }}
tabIndex={0}
type="button"
aria-haspopup="true"
aria-expanded="false"
>
Knowledge Knowledge
<span className="dropdown-arrow"></span> </Link>
</button> <ul className="dropdown-menu">
<ul className="knowledge-dropdown-menu"> <li className="nav-item">
<li><Link href="/corpedia" className="knowledge-title">Corpedia</Link></li> <Link href="/corpedia" className={`nav-link ${isActive("/corpedia") ? "active" : ""}`}>
<li><Link href="/taxwire" className="knowledge-title">Taxwire</Link></li> Corpedia
<li><Link href="/budgetpanorama" className="knowledge-title">Budget Panorama</Link></li> </Link>
<li><Link href="/blog" className="knowledge-title">Blogs</Link></li> <ul>
<li className="nav-item">
<Link href="/taxwire" className={`nav-link ${isActive("/taxwire") ? "active" : ""}`}>
Taxwire
</Link>
</li>
<li className="nav-item">
<Link href="/budgetpanorama" className={`nav-link ${isActive("/budgetpanorama") ? "active" : ""}`}>
Budget Panorama
</Link>
</li>
</ul>
</li>
<li className="nav-item">
<Link href="/blog" className={`nav-link ${isActive("/blog") ? "active" : ""}`}>
Blogs
</Link>
</li>
</ul> </ul>
</li> </li>
...@@ -547,9 +516,7 @@ const Header = () => { ...@@ -547,9 +516,7 @@ const Header = () => {
className="nav-link dropdown-nav" className="nav-link dropdown-nav"
style={{ background: "none", border: "none", cursor: "pointer" }} style={{ background: "none", border: "none", cursor: "pointer" }}
> >
<Link href="/client-servicing" className="nav-link">
Client Servicing Client Servicing
</Link>
<span className="dropdown-arrow"></span> <span className="dropdown-arrow"></span>
</button> </button>
</li> </li>
...@@ -571,12 +538,6 @@ const Header = () => { ...@@ -571,12 +538,6 @@ const Header = () => {
Contact Us Contact Us
</Link> </Link>
</li> </li>
<li className="nav-item">
<Link href="/book-consult" className="book-consult-btn">
BOOK A CONSULT
</Link>
</li>
</ul> </ul>
</div> </div>
</nav> </nav>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!