78 lines
3.7 KiB
TypeScript
78 lines
3.7 KiB
TypeScript
"use client";
|
|
import React, { useState, useEffect } from "react";
|
|
import Link from "next/link";
|
|
import useSticky from "@/hooks/useSticky";
|
|
import NavItemsMetatron from "./NavItemsMetatron";
|
|
|
|
const Header1 = () => {
|
|
const sticky = useSticky();
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
const toggleOffcanvas = () => {
|
|
const nextState = !isOpen;
|
|
setIsOpen(nextState);
|
|
if (nextState) {
|
|
document.querySelector(".offcanvas__info")?.classList.add("info-open");
|
|
document.querySelector(".offcanvas__overlay")?.classList.add("overlay-open");
|
|
} else {
|
|
document.querySelector(".offcanvas__info")?.classList.remove("info-open");
|
|
document.querySelector(".offcanvas__overlay")?.classList.remove("overlay-open");
|
|
}
|
|
};
|
|
|
|
// Listen for outside clicks (e.g. clicking the overlay)
|
|
useEffect(() => {
|
|
const handleOutsideClose = () => {
|
|
setIsOpen(false);
|
|
};
|
|
const overlay = document.querySelector(".offcanvas__overlay");
|
|
overlay?.addEventListener("click", handleOutsideClose);
|
|
return () => overlay?.removeEventListener("click", handleOutsideClose);
|
|
}, []);
|
|
|
|
return (
|
|
<header className="header-metatron-style homepage1-body">
|
|
<div id="header-sticky" className={`vl-header-area vl-transparent-header ${sticky ? "header-sticky" : ""}`}>
|
|
<div className="container-fluid headerfix px-lg-5">
|
|
<div className="row align-items-center row-bg3 px-lg-4">
|
|
<div className="col-lg-3 col-md-6 col-9">
|
|
<div className="vl-logo">
|
|
<Link href="/">
|
|
<img src="/assets/img-app/logo.webp" alt="header logo" style={{ width: '100%', maxWidth: '260px', height: 'auto', transition: 'all 0.3s' }} />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-7 d-none d-lg-block">
|
|
<div className="vl-main-menu text-center">
|
|
<nav id="mobile-menu" className="vl-mobile-menu-active main-menu-metatron">
|
|
<NavItemsMetatron />
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-2 col-md-6 col-3">
|
|
<div className="header-action-metatron d-flex align-items-center justify-content-end">
|
|
<div className="header-btn-metatron d-none d-lg-block">
|
|
<Link className="vl-btn1" href="/contact" style={{ textDecoration: 'none', whiteSpace: 'nowrap' }}>
|
|
Get Started Now <i className="fa-solid fa-angle-right ms-2"></i>
|
|
</Link>
|
|
</div>
|
|
<div className="header-hamburger-metatron d-lg-none" onClick={toggleOffcanvas} style={{ zIndex: 1100 }}>
|
|
<button className="hamburger-btn">
|
|
{isOpen ? (
|
|
<i className="fa-solid fa-xmark"></i>
|
|
) : (
|
|
<i className="fa-solid fa-bars-staggered"></i>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|
|
|
|
export default Header1;
|