85 lines
4.3 KiB
TypeScript
85 lines
4.3 KiB
TypeScript
import React from "react";
|
|
import Link from "next/link";
|
|
import NavMenu from "./NavMenu";
|
|
import useSticky from "@/hooks/useSticky";
|
|
|
|
const Header3 = () => {
|
|
const sticky = useSticky();
|
|
|
|
const openOffcanvas = () => {
|
|
document.querySelector(".offcanvas__info")?.classList.add("info-open");
|
|
document.querySelector(".offcanvas__overlay")?.classList.add("overlay-open");
|
|
};
|
|
|
|
const openSearch = () => {
|
|
document.querySelector(".df-search-area")?.classList.add("opened");
|
|
document.querySelector(".body-overlay")?.classList.add("opened");
|
|
};
|
|
|
|
return (
|
|
<header>
|
|
<div className="container-fluid bg-color-1">
|
|
<div className="header-top">
|
|
<div className="header-top-contact-info">
|
|
<span className="email p-relative d-inline-flex align-items-center me-4" style={{ gap: '10px', paddingLeft: 0 }}>
|
|
<i className="fa-solid fa-envelope" style={{ position: 'static', transform: 'none' }}></i>
|
|
<a href="mailto:info@Metatron.com">info@Metatron.com</a>
|
|
</span>
|
|
<span className="time p-relative d-inline-flex align-items-center" style={{ gap: '10px', paddingLeft: 0 }}>
|
|
<i className="fa-solid fa-clock" style={{ position: 'static', transform: 'none' }}></i>
|
|
Hours: Mon - Sat: 10.00 AM - 4.00 PM
|
|
</span>
|
|
</div>
|
|
<div className="header-top-socials">
|
|
<span><a href="#"><i className="fa-brands fa-facebook-f"></i></a></span>
|
|
<span><a href="#"><i className="fa-brands fa-twitter"></i></a></span>
|
|
<span><a href="#"><i className="fa-brands fa-linkedin-in"></i></a></span>
|
|
<span><a href="#"><i className="fa-brands fa-youtube"></i></a></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="header-sticky" className={`header-area header-style-three ${sticky ? 'sticky' : ''}`}>
|
|
<div className="large-container">
|
|
<div className="mega-menu-wrapper">
|
|
<div className="header-main">
|
|
<div className="header-left">
|
|
<div className="header-logo">
|
|
<Link href="/"><img src="/assets/img/home/footer/footer-logo-black.webp" alt="header logo" /></Link>
|
|
</div>
|
|
</div>
|
|
<div className="header-right d-flex justify-content-end">
|
|
<div className="mean__menu-wrapper d-none d-lg-block">
|
|
<div className="main-menu">
|
|
<nav id="mobile-menu"><NavMenu /></nav>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className="search-toggle-open header-search my-auto"
|
|
onClick={openSearch}
|
|
>
|
|
<div className="search-icon"><i className="fa-solid fa-magnifying-glass"></i></div>
|
|
</div>
|
|
<div className="header-shopping-cart my-auto">
|
|
<div className="cart-icon"><Link href="/shop"><i className="fa-solid fa-cart-shopping"></i></Link></div>
|
|
</div>
|
|
<div
|
|
className="header__hamburger d-xl-block my-auto"
|
|
onClick={openOffcanvas}
|
|
>
|
|
<div className="sidebar__toggle">
|
|
<a className="bar-icon" href="javascript:void(0)">
|
|
<i className="fa-solid fa-bars"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|
|
|
|
export default Header3;
|