110 lines
3.3 KiB
React
110 lines
3.3 KiB
React
'use client'
|
|
|
|
import React, { useEffect, useState } from "react";
|
|
import Link from "next/link";
|
|
import MegaMenu from "./mega-menu/MegaMenu";
|
|
import MegaMenuMobile from "./mega-menu/MegaMenuMobile";
|
|
import Image from "next/image";
|
|
|
|
const HeaderThree = () => {
|
|
const [navbar, setNavbar] = useState(false);
|
|
|
|
const changeBackground = () => {
|
|
if (typeof window !== "undefined") {
|
|
if (window.scrollY >= 68) {
|
|
setNavbar(true);
|
|
} else {
|
|
setNavbar(false);
|
|
}
|
|
}
|
|
|
|
};
|
|
|
|
useEffect(() => {
|
|
|
|
window.addEventListener("scroll", changeBackground);
|
|
return () => {
|
|
window.removeEventListener("scroll", changeBackground);
|
|
}
|
|
}, [])
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
className={
|
|
navbar
|
|
? "theme-main-menu sticky-menu theme-menu-two bg-none fixed"
|
|
: "theme-main-menu sticky-menu theme-menu-two bg-none"
|
|
}
|
|
>
|
|
<div className="d-flex align-items-center justify-content-center">
|
|
<div className="logo">
|
|
<Link href="/">
|
|
<Image width="87" height="40" src="/images/logo/logo.png" alt="brand logo" />
|
|
</Link>
|
|
</div>
|
|
{/* End Logo */}
|
|
|
|
<nav id="mega-menu-holder" className="navbar navbar-expand-lg">
|
|
<div className="container nav-container">
|
|
<div
|
|
className="navbar-collapse collapse"
|
|
id="navbarSupportedContent"
|
|
>
|
|
<div className="d-lg-flex justify-content-between align-items-center">
|
|
<MegaMenu />
|
|
{/* End MegaMenu */}
|
|
|
|
{/*<ul className="right-widget">*/}
|
|
{/* <li className="d-sm-flex">*/}
|
|
{/* <ul className="language-button-group d-flex align-items-center justify-content-center">*/}
|
|
{/* <li>*/}
|
|
{/* <a href="#" className="eng-lang active">*/}
|
|
{/* En.{" "}*/}
|
|
{/* </a>*/}
|
|
{/* </li>*/}
|
|
{/* <li>*/}
|
|
{/* <a href="#" className="ru-lang">*/}
|
|
{/* Ru.*/}
|
|
{/* </a>*/}
|
|
{/* </li>*/}
|
|
{/* </ul>*/}
|
|
{/* /!* End ul *!/*/}
|
|
|
|
{/* <ul className="user-login-button d-flex align-items-center justify-content-center">*/}
|
|
{/* <li>*/}
|
|
{/* <Link href="/login" className="signIn-action">*/}
|
|
{/* Login*/}
|
|
{/* </Link>*/}
|
|
{/* </li>*/}
|
|
{/* <li>*/}
|
|
{/* <Link href="/signup" className="signUp-action">*/}
|
|
{/* Sign Up*/}
|
|
{/* </Link>*/}
|
|
{/* </li>*/}
|
|
{/* </ul>*/}
|
|
{/* /!* End ul *!/*/}
|
|
{/* </li>*/}
|
|
{/*</ul>*/}
|
|
{/* End right-button-group */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
{/* End nav */}
|
|
</div>
|
|
|
|
<MegaMenuMobile />
|
|
{/* End Mega Menu for Mobile */}
|
|
</div>
|
|
{/* /.theme-main-menu */}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default HeaderThree;
|