138 lines
10 KiB
JavaScript
138 lines
10 KiB
JavaScript
import React, { useState } from 'react'
|
|
import Link from 'next/link'
|
|
import MobileMenu from '../MobileMenu/MobileMenu'
|
|
|
|
|
|
const Header = (props) => {
|
|
const [menuActive, setMenuState] = useState(false);
|
|
const SubmitHandler = (e) => {
|
|
e.preventDefault()
|
|
}
|
|
|
|
const ClickHandler = () => {
|
|
window.scrollTo(10, 0);
|
|
}
|
|
|
|
return (
|
|
<header id="header">
|
|
<div className={`wpo-site-header ${props.hclass}`}>
|
|
<nav className="navigation navbar navbar-expand-lg navbar-light">
|
|
<div className="container-fluid">
|
|
<div className="row align-items-center">
|
|
<div className="col-lg-3 col-md-4 col-3 d-lg-none dl-block">
|
|
<div className="mobail-menu">
|
|
<MobileMenu />
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-2 col-md-4 col-6">
|
|
<div className="navbar-header">
|
|
<Link onClick={ClickHandler} className="navbar-brand" href="/"><img src={props.Logo}
|
|
alt="logo"/></Link>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-8 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></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-2 col-md-3 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="close-form">
|
|
<Link onClick={ClickHandler} className="theme-btn" href="/donate"><span className="text">Donate Now</span>
|
|
<span className="mobile">
|
|
<i className="fi flaticon-charity"></i>
|
|
</span></Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|
|
|
|
export default Header; |