156 lines
11 KiB
JavaScript
156 lines
11 KiB
JavaScript
import React, { useState } from 'react'
|
|
import Link from 'next/link'
|
|
import HeaderTopbar from '../HeaderTopbar/HeaderTopbar'
|
|
import MobileMenu from '../MobileMenu/MobileMenu'
|
|
import Logo from '/public/images/logo.png'
|
|
import Image from 'next/image'
|
|
|
|
const Header2 = (props) => {
|
|
const [menuActive, setMenuState] = useState(false);
|
|
const SubmitHandler = (e) => {
|
|
e.preventDefault()
|
|
}
|
|
|
|
const ClickHandler = () => {
|
|
window.scrollTo(10, 0);
|
|
}
|
|
|
|
return (
|
|
<header id="header">
|
|
<HeaderTopbar />
|
|
<div className="wpo-site-header wpo-site-header-s2">
|
|
<nav className="navigation navbar navbar-expand-lg navbar-light">
|
|
<div className="container">
|
|
<div className="row align-items-center">
|
|
<div className="col-lg-3 col-md-3 col-3 d-lg-none dl-block">
|
|
<div className="mobail-menu">
|
|
<MobileMenu />
|
|
</div>
|
|
</div>
|
|
<div className="col-md-6 col-6 d-lg-none dl-block">
|
|
<div className="navbar-header">
|
|
<Link onClick={ClickHandler} className="navbar-brand" href="/"><Image src={Logo}
|
|
alt="logo" /></Link>
|
|
</div>
|
|
</div>
|
|
<div className="col col-lg-7 col-md-1 col-1">
|
|
<div id="navbar" className="collapse navbar-collapse navigation-holder">
|
|
<button className="menu-close"><i className="ti-close"></i></button>
|
|
<ul className="nav navbar-nav mb-2 mb-lg-0">
|
|
<li className="menu-item-has-children">
|
|
<Link onClick={ClickHandler} href="/">Home</Link>
|
|
<ul className="sub-menu">
|
|
<li><Link onClick={ClickHandler} href="/home">Main Home</Link></li>
|
|
<li><Link onClick={ClickHandler} href="/home2">Election Home</Link></li>
|
|
<li><Link onClick={ClickHandler} href="/home3">Male Candidate</Link></li>
|
|
<li><Link onClick={ClickHandler} href="/home4">Female Candidate</Link></li>
|
|
</ul>
|
|
</li>
|
|
<li><Link onClick={ClickHandler} href="/about">About us</Link>
|
|
<ul className="sub-menu">
|
|
<li><Link onClick={ClickHandler} href="/about/our-mission">Our Mission</Link></li>
|
|
<li><Link onClick={ClickHandler} href="/about/racial-justice">Racial Justice</Link></li>
|
|
</ul>
|
|
</li>
|
|
<li className="menu-item-has-children">
|
|
<Link onClick={ClickHandler} href="/">Campaign</Link>
|
|
<ul className="sub-menu">
|
|
<li><Link onClick={ClickHandler} href="/campaign">Campaign Style 1</Link></li>
|
|
<li><Link onClick={ClickHandler} href="/campaign-2">Campaign Style 2</Link></li>
|
|
<li><Link onClick={ClickHandler} href="/campaign-3">Campaign Style 3</Link></li>
|
|
<li><Link onClick={ClickHandler} href="/campaign-single/Support-for-Womans">Campaign single</Link></li>
|
|
</ul>
|
|
</li>
|
|
<li className="menu-item-has-children">
|
|
<Link onClick={ClickHandler} href="/">Pages</Link>
|
|
<ul className="sub-menu">
|
|
<li><Link onClick={ClickHandler} href="/gallery">Gallery</Link></li>
|
|
<li><Link onClick={ClickHandler} href="/testimonial">Testimonial</Link></li>
|
|
<li><Link onClick={ClickHandler} href="/team">Team</Link></li>
|
|
<li><Link onClick={ClickHandler} href="/team-single/Esther-Howard">Team Single</Link></li>
|
|
<li className="menu-item-has-children">
|
|
<Link onClick={ClickHandler} href="/">Services</Link>
|
|
<ul className="sub-menu">
|
|
<li><Link onClick={ClickHandler} href="/service">Services</Link></li>
|
|
<li><Link onClick={ClickHandler} href="/service-single/Economic-Establishment">Services Single</Link></li>
|
|
</ul>
|
|
</li>
|
|
<li><Link onClick={ClickHandler} href="/shop">Shop</Link></li>
|
|
<li><Link onClick={ClickHandler} href="/product-single/The-Audacity-of-Hope">Shop Single</Link></li>
|
|
<li><Link onClick={ClickHandler} href="/cart">Cart</Link></li>
|
|
<li><Link onClick={ClickHandler} href="/checkout">Checkout</Link></li>
|
|
<li><Link onClick={ClickHandler} href="/faq">FAQ</Link></li>
|
|
<li><Link onClick={ClickHandler} href="/volunteer">Volunteer</Link></li>
|
|
<li><Link onClick={ClickHandler} href="/404">404 Error</Link></li>
|
|
<li><Link onClick={ClickHandler} href="/login">Login</Link></li>
|
|
<li><Link onClick={ClickHandler} href="/register">Register</Link></li>
|
|
</ul>
|
|
</li>
|
|
<li className="menu-item-has-children">
|
|
<Link onClick={ClickHandler} href="/">Blog</Link>
|
|
<ul className="sub-menu">
|
|
<li><Link onClick={ClickHandler} href="/blog">Blog right sidebar</Link></li>
|
|
<li><Link onClick={ClickHandler} href="/blog-left-sidebar">Blog left sidebar</Link></li>
|
|
<li><Link onClick={ClickHandler} href="/blog-fullwidth">Blog fullwidth</Link></li>
|
|
<li className="menu-item-has-children">
|
|
<Link onClick={ClickHandler} href="/">Blog details</Link>
|
|
<ul className="sub-menu">
|
|
<li><Link onClick={ClickHandler} href="/blog-single/support-progressive-change">Blog details right sidebar</Link>
|
|
</li>
|
|
<li><Link onClick={ClickHandler} href="/blog-single-left-sidebar/support-progressive-change">Blog details left
|
|
sidebar</Link></li>
|
|
<li><Link onClick={ClickHandler} href="/blog-single-fullwidth/support-progressive-change">Blog details
|
|
fullwidth</Link></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li><Link onClick={ClickHandler} href="/contact">Contact</Link></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-5 col-md-2 col-2">
|
|
<div className="header-right">
|
|
<div className="header-search-form-wrapper">
|
|
<div className="cart-search-contact">
|
|
<button onClick={() => setMenuState(!menuActive)} className="search-toggle-btn"><i
|
|
className={`fi ti-search ${menuActive ? "ti-close" : "fi "}`}></i></button>
|
|
<div className={`header-search-form ${menuActive ? "header-search-content-toggle" : ""}`}>
|
|
<form onSubmit={SubmitHandler}>
|
|
<div>
|
|
<input type="text" className="form-control"
|
|
placeholder="Search here..." />
|
|
<button type="submit"><i
|
|
className="fi flaticon-search"></i></button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="language">
|
|
<select name="language" id="language">
|
|
<option value="English">English</option>
|
|
<option value="Arabic">Arabic</option>
|
|
<option value="Japanese">Japanese</option>
|
|
<option value="Spanish">Spanish</option>
|
|
</select>
|
|
</div>
|
|
<div className="social">
|
|
<ul>
|
|
<li><Link href="/"><i className="fi flaticon-facebook-app-symbol"></i></Link></li>
|
|
<li><Link href="/"><i className="fi flaticon-twitter"></i></Link></li>
|
|
<li><Link href="/"><i className="fi flaticon-linkedin"></i></Link></li>
|
|
<li><Link href="/"><i className="fi flaticon-instagram-1"></i></Link></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|
|
|
|
export default Header2; |