Header.js
5.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
import React, { useState, useEffect } from "react";
import Link from "next/link";
import { useRouter } from "next/router";
import Image from "next/image";
const Header = () => {
const [currentPath, setCurrentPath] = useState("");
const [menu, setMenu] = useState(true);
const router = useRouter();
useEffect(() => {
setCurrentPath(router.asPath);
}, [router]);
const toggleNavbar = () => {
setMenu(!menu);
};
// Close the menu on route change
useEffect(() => {
const handleRouteChange = () => {
setMenu(true); // Close the menu
};
// Listen for route changes
router.events.on("routeChangeStart", handleRouteChange);
// Cleanup event listener on component unmount
return () => {
router.events.off("routeChangeStart", handleRouteChange);
};
}, [router]);
// Sticky navbar effect
useEffect(() => {
const elementId = document.getElementById("navbar");
const handleScroll = () => {
if (window.scrollY > 170) {
elementId.classList.add("is-sticky");
} else {
elementId.classList.remove("is-sticky");
}
};
document.addEventListener("scroll", handleScroll);
// Cleanup scroll event listener on unmount
return () => {
document.removeEventListener("scroll", handleScroll);
};
}, []);
const isActive = (path) => currentPath.startsWith(path);
const classOne = menu ? "collapse navbar-collapse" : "collapse navbar-collapse show";
const classTwo = menu ? "navbar-toggler navbar-toggler-right collapsed" : "navbar-toggler navbar-toggler-right";
return (
<>
<div id="navbar" className="navbar-area">
<div className="zixon-nav">
<div className="container-fluid">
<nav className="navbar navbar-expand-md navbar-light">
<Link href="/" className="navbar-brand">
<Image width={144} height={33} src="/images/logo.png" alt="logo" />
</Link>
<button
onClick={toggleNavbar}
className={classTwo}
type="button"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="icon-bar top-bar"></span>
<span className="icon-bar middle-bar"></span>
<span className="icon-bar bottom-bar"></span>
</button>
<div className={classOne} id="navbarSupportedContent">
<ul className="navbar-nav">
<li className="nav-item">
<Link href="/" className={`nav-link ${isActive("/") ? "active" : ""}`}>
Home
</Link>
</li>
<li className="nav-item">
<Link href="/knowledge" className="dropdown-toggle nav-link">
Knowledge
</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" : ""}`}>
Tax Wire
</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="/blogs" className={`nav-link ${isActive("/blogs") ? "active" : ""}`}>
Blogs
</Link>
</li>
</ul>
</li>
<li className="nav-item">
<Link href="/people" className={`nav-link ${isActive("/people") ? "active" : ""}`}>
People
</Link>
</li>
<li className="nav-item">
<Link href="/client-servicing" className={`nav-link ${isActive("/client-servicing") ? "active" : ""}`}>
Client Servicing
</Link>
</li>
<li className="nav-item">
<Link href="#" className={`nav-link ${isActive("/careers") ? "active" : ""}`}>
Careers
</Link>
</li>
<li className="nav-item">
<Link href="/industry" className={`nav-link ${isActive("/industry") ? "active" : ""}`}>
Industry
</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>
</>
);
};
export default Header;