irongit
Sign inRegister
huncholanehuncholane/slroofPublic

one home

huncholanehuncholaneauthored
parent 0e99c05commit e312ce8dfe4d65564d747cd62d2383515b80ea9eBrowse files

2 files changed, +280 -174

+251-144components/layout/Header.js
@@ -1,154 +1,261 @@
1-import Link from "next/link"
2-import { useEffect, useState } from 'react'
3-import Sidebar from "./Sidebar"
1+import Link from "next/link";
2+import { useEffect, useState } from "react";
3+import Sidebar from "./Sidebar";
44
55 export default function Header({ headerCls, headerTop }) {
6- const [scroll, setScroll] = useState(0)
6+ const [scroll, setScroll] = useState(0);
77
8- const [isToggled, setToggled] = useState(false)
9- const handleToggled = () => {
10- setToggled(!isToggled)
11- !isToggled ? document.body.classList.add("mobile-menu-visible") : document.body.classList.remove("mobile-menu-visible")
12- }
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+ };
1315
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>
14141
15- useEffect(() => {
16- document.addEventListener("scroll", () => {
17- const scrollCheck = window.scrollY > 100
18- if (scrollCheck !== scroll) {
19- setScroll(scrollCheck)
20- }
21- })
22- })
23- return (
24- <>
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><i className="fas fa-phone-alt" /><Link href="tel:0123456789">+88 ( 5548 ) 6548</Link></li>
35- <li><i className="fas fa-envelope" /><Link href="mailto:infoyour@gmail.com">infoyour@gmail.com</Link></li>
36- </ul>
37- </div>
38- </div>
39- <div className="col-xl-4 col-lg-3">
40- <div className="header-top-right">
41- <div className="header-lang">
42- <div className="dropdown">
43- <button className="dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
44- <img src="assets/img/icon/united-states.jpg" alt="" /> English
45- </button>
46- <div className="dropdown-menu" aria-labelledby="dropdownMenuButton1">
47- <Link className="dropdown-item" href="/"><img src="assets/img/icon/russia.jpg" alt="" />Russia</Link>
48- <Link className="dropdown-item" href="/"><img src="assets/img/icon/india.jpg" alt="" />India</Link>
49- <Link className="dropdown-item" href="/"><img src="assets/img/icon/bangladesh.jpg" alt="" />Bangla</Link>
50- </div>
51- </div>
52- </div>
53- <div className="header-social">
54- <ul className="list-wrap">
55- <li><Link href="#"><i className="fab fa-facebook-f" /></Link></li>
56- <li><Link href="#"><i className="fab fa-linkedin-in" /></Link></li>
57- <li><Link href="#"><i className="fab fa-twitter" /></Link></li>
58- <li><Link href="#"><i className="fab fa-youtube" /></Link></li>
59- </ul>
60- </div>
61- </div>
62- </div>
63- </div>
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>
64204 </div>
205+ </nav>
65206 </div>
66- }
67- <header>
68- <div id="sticky-header" className={`menu-area ${scroll ? "sticky-menu" : ""} ${headerCls ? headerCls : ""}`}>
69- <div className="container">
70- <div className="row">
71- <div className="col-12">
72- <div className="mobile-nav-toggler" onClick={handleToggled}><i className="fas fa-bars" /></div>
73- <div className="menu-wrap">
74- <nav className="menu-nav">
75- <div className="logo different-logo">
76- <Link href="/"><img src="/assets/img/logo/logo.png" alt="Logo" /></Link>
77- </div>
78- <div className="logo d-none">
79- <Link href="/"><img src="/assets/img/logo/logo_02.png" alt="Logo" /></Link>
80- </div>
81- <div className="navbar-wrap main-menu d-none d-lg-flex">
82- <ul className="navigation">
83- <li className="active menu-item-has-children"><Link href="/#">Home</Link>
84- <ul className="sub-menu">
85- <li><Link href="/">Home One</Link></li>
86- <li><Link href="/index-2">Home Two</Link></li>
87- <li><Link href="/index-3">Home Three</Link></li>
88- <li><Link href="/index-4">Home Four</Link></li>
89- </ul>
90- </li>
91- <li><Link href="/about">About us</Link></li>
92- <li className="menu-item-has-children"><Link href="/#">Services</Link>
93- <ul className="sub-menu">
94- <li><Link href="/services">Services Page</Link></li>
95- <li><Link href="/services-details">Services Details</Link></li>
96- </ul>
97- </li>
98- <li className="menu-item-has-children"><Link href="/#">Pages</Link>
99- <ul className="sub-menu">
100- <li><Link href="/project">Project Page</Link></li>
101- <li><Link href="/project-details">Project Details</Link></li>
102- <li><Link href="/team">Our Team</Link></li>
103- <li><Link href="/team-details">Team Details</Link></li>
104- <li><Link href="/error">404 Error</Link></li>
105- </ul>
106- </li>
107- <li className="menu-item-has-children"><Link href="/#">Blog</Link>
108- <ul className="sub-menu">
109- <li><Link href="/blog">Our Blog</Link></li>
110- <li><Link href="/blog-details">Blog Details</Link></li>
111- </ul>
112- </li>
113- <li><Link href="/contact">Contact</Link></li>
114- </ul>
115- </div>
116- <div className="header-action d-none d-md-block">
117- <ul className="list-wrap">
118- <li className="header-btn"><Link href="/contact" className="btn">Get a Quoute</Link></li>
119- </ul>
120- </div>
121- </nav>
122- </div>
123- {/* Mobile Menu */}
124- <div className="mobile-menu">
125- <nav className="menu-box">
126- <div className="close-btn" onClick={handleToggled}><i className="fas fa-times" /></div>
127- <div className="nav-logo">
128- <Link href="/"><img src="/assets/img/logo/logo_02.png" alt="Logo" /></Link>
129- </div>
130- <div className="menu-outer">
131- <Sidebar />
132- </div>
133- <div className="social-links">
134- <ul className="clearfix list-wrap">
135- <li><Link href="/#"><i className="fab fa-facebook-f" /></Link></li>
136- <li><Link href="/#"><i className="fab fa-twitter" /></Link></li>
137- <li><Link href="/#"><i className="fab fa-instagram" /></Link></li>
138- <li><Link href="/#"><i className="fab fa-linkedin-in" /></Link></li>
139- <li><Link href="/#"><i className="fab fa-youtube" /></Link></li>
140- </ul>
141- </div>
142- </nav>
143- </div>
144- <div className="menu-backdrop" />
145- {/* End Mobile Menu */}
146- </div>
147- </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>
148217 </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>
149251 </div>
150- </header>
151-
152- </>
153- )
252+ <div className="menu-backdrop" />
253+ {/* End Mobile Menu */}
254+ </div>
255+ </div>
256+ </div>
257+ </div>
258+ </header>
259+ </>
260+ );
154261 }
+29-30pages/index.js
@@ -1,33 +1,32 @@
1-import Layout from "@/components/layout/Layout"
1+import Layout from "@/components/layout/Layout";
22
3-import Banner1 from "@/components/sections/Banner1"
4-import Brand1 from "@/components/sections/Brand1"
5-import Features1 from "@/components/sections/Features1"
6-import About1 from "@/components/sections/About1"
7-import Services1 from "@/components/sections/Services1"
8-import Project1 from "@/components/sections/Project1"
9-import Team1 from "@/components/sections/Team1"
10-import Counter1 from "@/components/sections/Counter1"
11-import Testimonial1 from "@/components/sections/Testimonial1"
12-import Blog1 from "@/components/sections/Blog1"
13-import Newsletter1 from "@/components/sections/Newsletter1"
3+import Banner1 from "@/components/sections/Banner1";
4+import Brand1 from "@/components/sections/Brand1";
5+import Features1 from "@/components/sections/Features1";
6+import About1 from "@/components/sections/About1";
7+import Services1 from "@/components/sections/Services1";
8+import Project1 from "@/components/sections/Project1";
9+import Team1 from "@/components/sections/Team1";
10+import Counter1 from "@/components/sections/Counter1";
11+import Testimonial1 from "@/components/sections/Testimonial1";
12+import Blog1 from "@/components/sections/Blog1";
13+import Newsletter1 from "@/components/sections/Newsletter1";
1414
1515 export default function Home() {
16-
17- return (
18- <>
19- <Layout headerCls="transparent-header">
20- <Banner1 />
21- <Features1 />
22- <About1 />
23- <Services1 />
24- <Project1 />
25- <Team1 />
26- <Counter1 />
27- <Testimonial1 />
28- <Blog1 />
29- <Newsletter1 />
30- </Layout>
31- </>
32- )
33-}
16+ return (
17+ <>
18+ <Layout headerCls="transparent-header">
19+ <Banner1 />
20+ <Features1 />
21+ <About1 />
22+ <Services1 />
23+ <Project1 />
24+ <Team1 />
25+ <Counter1 />
26+ <Testimonial1 />
27+ <Blog1 />
28+ <Newsletter1 />
29+ </Layout>
30+ </>
31+ );
32+}