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"
const Header = () => {
const [menu, setMenu] = useState(true)
const [knowledgeOpen, setKnowledgeOpen] = useState(false)
const [clientServicingOpen, setClientServicingOpen] = useState(false)
const router = useRouter()
......@@ -18,7 +17,6 @@ const Header = () => {
useEffect(() => {
const handleRouteChange = () => {
setMenu(true)
setKnowledgeOpen(false)
setClientServicingOpen(false)
}
......@@ -126,7 +124,8 @@ const Header = () => {
.navbar-nav {
display: flex;
align-items: center;
gap: 2rem;
gap: 0.1rem;
justify-content: flex-end;
}
.nav-link {
......@@ -181,6 +180,75 @@ const Header = () => {
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-container {
position: relative;
......@@ -218,11 +286,6 @@ const Header = () => {
gap: 2.5rem;
}
.knowledge-grid {
grid-template-columns: repeat(4, 1fr);
gap: 3rem;
}
.client-servicing-grid {
grid-template-columns: repeat(6, 1fr);
gap: 2rem;
......@@ -259,35 +322,6 @@ const Header = () => {
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 {
list-style: none;
padding: 0;
......@@ -296,10 +330,6 @@ const Header = () => {
transition: all 0.3s ease;
}
.mega-column-list.collapsed {
display: none;
}
.mega-column-list li {
margin-bottom: 0.75rem;
}
......@@ -346,66 +376,12 @@ const Header = () => {
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) {
.client-servicing-grid {
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.knowledge-grid {
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
.mega-menu-content {
padding: 2rem;
}
......@@ -427,17 +403,11 @@ const Header = () => {
gap: 0;
}
.knowledge-grid {
grid-template-columns: 1fr;
gap: 0;
}
.mega-menu-content {
padding: 1.5rem;
}
.mega-column-title,
.knowledge-title {
.mega-column-title {
font-size: 1rem;
border-bottom: none;
padding-bottom: 0;
......@@ -466,17 +436,6 @@ const Header = () => {
.service-header {
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) {
......@@ -516,22 +475,32 @@ const Header = () => {
{/* Knowledge Dropdown */}
<li className="nav-item knowledge-dropdown">
<button
className="nav-link dropdown-nav"
style={{ background: "none", border: "none", cursor: "pointer" }}
tabIndex={0}
type="button"
aria-haspopup="true"
aria-expanded="false"
>
<Link href="/knowledge" className="dropdown-toggle nav-link">
Knowledge
<span className="dropdown-arrow"></span>
</button>
<ul className="knowledge-dropdown-menu">
<li><Link href="/corpedia" className="knowledge-title">Corpedia</Link></li>
<li><Link href="/taxwire" className="knowledge-title">Taxwire</Link></li>
<li><Link href="/budgetpanorama" className="knowledge-title">Budget Panorama</Link></li>
<li><Link href="/blog" className="knowledge-title">Blogs</Link></li>
</Link>
<ul className="dropdown-menu">
<li className="nav-item">
<Link href="/corpedia" className={`nav-link ${isActive("/corpedia") ? "active" : ""}`}>
Corpedia
</Link>
<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>
</li>
......@@ -547,9 +516,7 @@ const Header = () => {
className="nav-link dropdown-nav"
style={{ background: "none", border: "none", cursor: "pointer" }}
>
<Link href="/client-servicing" className="nav-link">
Client Servicing
</Link>
<span className="dropdown-arrow"></span>
</button>
</li>
......@@ -571,12 +538,6 @@ const Header = () => {
Contact Us
</Link>
</li>
<li className="nav-item">
<Link href="/book-consult" className="book-consult-btn">
BOOK A CONSULT
</Link>
</li>
</ul>
</div>
</nav>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!