irongit
Sign inRegister
huncholanehuncholane/slroofPublic
slroof/components/layout/Header.js
261 lines9.9 KBJavaScript
RawDownloadHistory
1import Link from "next/link";
2import { useEffect, useState } from "react";
3import Sidebar from "./Sidebar";
4
5export default function Header({ headerCls, headerTop }) {
6 const [scroll, setScroll] = useState(0);
7
8 const [isToggled, setToggled] = useState(false);
9 const handleToggled = () => {
10 setToggled(!isToggled);
11 !isToggled
12 ? document.body.classList.add("mobile-menu-visible")
13 : document.body.classList.remove("mobile-menu-visible");
14 };
15
16 useEffect(() => {
17 document.addEventListener("scroll", () => {
18 const scrollCheck = window.scrollY > 100;
19 if (scrollCheck !== scroll) {
20 setScroll(scrollCheck);
21 }
22 });
23 });
24 return (
25 <>
26 {headerTop && (
27 <div className="header-top-wrap">
28 <div className="container">
29 <div className="row">
30 <div className="col-xl-8 col-lg-9">
31 <div className="header-top-left">
32 <ul className="list-wrap">
33 <li>Welcome to Roofx Construction</li>
34 <li>
35 <i className="fas fa-phone-alt" />
36 <Link href="tel:0123456789">+88 ( 5548 ) 6548</Link>
37 </li>
38 <li>
39 <i className="fas fa-envelope" />
40 <Link href="mailto:infoyour@gmail.com">
41 infoyour@gmail.com
42 </Link>
43 </li>
44 </ul>
45 </div>
46 </div>
47 <div className="col-xl-4 col-lg-3">
48 <div className="header-top-right">
49 <div className="header-lang">
50 <div className="dropdown">
51 <button
52 className="dropdown-toggle"
53 type="button"
54 id="dropdownMenuButton1"
55 data-bs-toggle="dropdown"
56 aria-haspopup="true"
57 aria-expanded="false"
58 >
59 <img src="assets/img/icon/united-states.jpg" alt="" />{" "}
60 English
61 </button>
62 <div
63 className="dropdown-menu"
64 aria-labelledby="dropdownMenuButton1"
65 >
66 <Link className="dropdown-item" href="/">
67 <img src="assets/img/icon/russia.jpg" alt="" />
68 Russia
69 </Link>
70 <Link className="dropdown-item" href="/">
71 <img src="assets/img/icon/india.jpg" alt="" />
72 India
73 </Link>
74 <Link className="dropdown-item" href="/">
75 <img src="assets/img/icon/bangladesh.jpg" alt="" />
76 Bangla
77 </Link>
78 </div>
79 </div>
80 </div>
81 <div className="header-social">
82 <ul className="list-wrap">
83 <li>
84 <Link href="#">
85 <i className="fab fa-facebook-f" />
86 </Link>
87 </li>
88 <li>
89 <Link href="#">
90 <i className="fab fa-linkedin-in" />
91 </Link>
92 </li>
93 <li>
94 <Link href="#">
95 <i className="fab fa-twitter" />
96 </Link>
97 </li>
98 <li>
99 <Link href="#">
100 <i className="fab fa-youtube" />
101 </Link>
102 </li>
103 </ul>
104 </div>
105 </div>
106 </div>
107 </div>
108 </div>
109 </div>
110 )}
111 <header>
112 <div
113 id="sticky-header"
114 className={`menu-area ${scroll ? "sticky-menu" : ""} ${
115 headerCls ? headerCls : ""
116 }`}
117 >
118 <div className="container">
119 <div className="row">
120 <div className="col-12">
121 <div className="mobile-nav-toggler" onClick={handleToggled}>
122 <i className="fas fa-bars" />
123 </div>
124 <div className="menu-wrap">
125 <nav className="menu-nav">
126 <div className="logo different-logo">
127 <Link href="/">
128 <img src="/assets/img/logo/logo.png" alt="Logo" />
129 </Link>
130 </div>
131 <div className="logo d-none">
132 <Link href="/">
133 <img src="/assets/img/logo/logo_02.png" alt="Logo" />
134 </Link>
135 </div>
136 <div className="navbar-wrap main-menu d-none d-lg-flex">
137 <ul className="navigation">
138 <li>
139 <Link href="/">Home</Link>
140 </li>
141
142 <li>
143 <Link href="/about">About us</Link>
144 </li>
145 <li className="menu-item-has-children">
146 <Link href="/#">Services</Link>
147 <ul className="sub-menu">
148 <li>
149 <Link href="/services">Services Page</Link>
150 </li>
151 <li>
152 <Link href="/services-details">
153 Services Details
154 </Link>
155 </li>
156 </ul>
157 </li>
158 <li className="menu-item-has-children">
159 <Link href="/#">Pages</Link>
160 <ul className="sub-menu">
161 <li>
162 <Link href="/project">Project Page</Link>
163 </li>
164 <li>
165 <Link href="/project-details">
166 Project Details
167 </Link>
168 </li>
169 <li>
170 <Link href="/team">Our Team</Link>
171 </li>
172 <li>
173 <Link href="/team-details">Team Details</Link>
174 </li>
175 <li>
176 <Link href="/error">404 Error</Link>
177 </li>
178 </ul>
179 </li>
180 <li className="menu-item-has-children">
181 <Link href="/#">Blog</Link>
182 <ul className="sub-menu">
183 <li>
184 <Link href="/blog">Our Blog</Link>
185 </li>
186 <li>
187 <Link href="/blog-details">Blog Details</Link>
188 </li>
189 </ul>
190 </li>
191 <li>
192 <Link href="/contact">Contact</Link>
193 </li>
194 </ul>
195 </div>
196 <div className="header-action d-none d-md-block">
197 <ul className="list-wrap">
198 <li className="header-btn">
199 <Link href="/contact" className="btn">
200 Get a Quoute
201 </Link>
202 </li>
203 </ul>
204 </div>
205 </nav>
206 </div>
207 {/* Mobile Menu */}
208 <div className="mobile-menu">
209 <nav className="menu-box">
210 <div className="close-btn" onClick={handleToggled}>
211 <i className="fas fa-times" />
212 </div>
213 <div className="nav-logo">
214 <Link href="/">
215 <img src="/assets/img/logo/logo_02.png" alt="Logo" />
216 </Link>
217 </div>
218 <div className="menu-outer">
219 <Sidebar />
220 </div>
221 <div className="social-links">
222 <ul className="clearfix list-wrap">
223 <li>
224 <Link href="/#">
225 <i className="fab fa-facebook-f" />
226 </Link>
227 </li>
228 <li>
229 <Link href="/#">
230 <i className="fab fa-twitter" />
231 </Link>
232 </li>
233 <li>
234 <Link href="/#">
235 <i className="fab fa-instagram" />
236 </Link>
237 </li>
238 <li>
239 <Link href="/#">
240 <i className="fab fa-linkedin-in" />
241 </Link>
242 </li>
243 <li>
244 <Link href="/#">
245 <i className="fab fa-youtube" />
246 </Link>
247 </li>
248 </ul>
249 </div>
250 </nav>
251 </div>
252 <div className="menu-backdrop" />
253 {/* End Mobile Menu */}
254 </div>
255 </div>
256 </div>
257 </div>
258 </header>
259 </>
260 );
261}