109 lines
5.6 KiB
JavaScript
109 lines
5.6 KiB
JavaScript
'use client'
|
|
|
|
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'
|
|
import { useRouter } from 'next/router'
|
|
import { useTranslation } from 'next-i18next'
|
|
import { changeLanguage } from '../../utils/commonFunction.utils'
|
|
|
|
const Header2 = (props) => {
|
|
const [menuActive, setMenuState] = useState(false)
|
|
const { t } = useTranslation('menu')
|
|
const router = useRouter()
|
|
const SubmitHandler = (e) => {
|
|
e.preventDefault()
|
|
}
|
|
|
|
const ClickHandler = () => {
|
|
window.scrollTo(10, 0)
|
|
}
|
|
|
|
const handleLanguageChange = (e) => {
|
|
const selectedLocale = e.target.value;
|
|
changeLanguage(router, selectedLocale);
|
|
};
|
|
|
|
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-md-6 col-9 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-lg-3 col-md-3 col-3 d-lg-none dl-block">
|
|
<div className="mobail-menu">
|
|
<MobileMenu />
|
|
</div>
|
|
</div>
|
|
<div className="col col-lg-9 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>
|
|
<Link onClick={ClickHandler} href="/">{t('home')}</Link>
|
|
</li>
|
|
<li>
|
|
<Link onClick={ClickHandler} href="/our-approach">{t('ourApproach')}</Link>
|
|
</li>
|
|
<li>
|
|
<Link onClick={ClickHandler} href="/about">{t('aboutUs')}</Link>
|
|
<ul className="sub-menu">
|
|
<li>
|
|
<Link onClick={ClickHandler} href="/about/our-mission">{t('ourMission')}</Link>
|
|
</li>
|
|
<li>
|
|
<Link onClick={ClickHandler} href="/about/racial-justice">{t('racialJustice')}</Link>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<Link onClick={ClickHandler} href="/blog">{t('blog')}</Link>
|
|
</li>
|
|
<li>
|
|
<Link onClick={ClickHandler} href="/services">{t('services')}</Link>
|
|
</li>
|
|
<li>
|
|
<Link onClick={ClickHandler} href="/contact">{t('contact')}</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-3 col-md-2 col-2">
|
|
<div className="header-right d-flex align-items-center justify-content-end">
|
|
<div className="language me-4">
|
|
<select onChange={handleLanguageChange} value={router.locale}>
|
|
<option value="es">Español</option>
|
|
<option value="en">English</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
|