75 lines
3.6 KiB
TypeScript
75 lines
3.6 KiB
TypeScript
"use client";
|
|
import React, { useState, useEffect } from 'react';
|
|
import Link from 'next/link';
|
|
import useSticky from '@/hooks/useSticky';
|
|
import NavItems from './NavItems';
|
|
import MobileMenu from './MobileMenu';
|
|
import ContactPopup from '@/components/common/ContactPopup/ContactPopup';
|
|
|
|
const Header = () => {
|
|
const sticky = useSticky();
|
|
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
|
const [isPopupOpen, setIsPopupOpen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const handleOpenPopup = () => setIsPopupOpen(true);
|
|
window.addEventListener('openContactPopup', handleOpenPopup);
|
|
return () => window.removeEventListener('openContactPopup', handleOpenPopup);
|
|
}, []);
|
|
|
|
const toggleMobileMenu = () => {
|
|
setIsMobileMenuOpen(!isMobileMenuOpen);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<header className="homepage1-body">
|
|
<div id="vl-header-sticky" className={`vl-header-area vl-transparent-header ${sticky ? "header-sticky" : ""}`}>
|
|
<div className="container headerfix">
|
|
<div className="row align-items-center row-bg3">
|
|
<div className="col-lg-3 col-md-6 col-6">
|
|
<div className="vl-logo">
|
|
<Link href="/">
|
|
<img src="/assets/img/logo.webp" alt="MetatronCube" style={{ width: '100%', maxWidth: '250px', height: 'auto', transition: 'all 0.3s' }} />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-6 d-none d-lg-block">
|
|
<div className="vl-main-menu text-center">
|
|
<nav className="vl-mobile-menu-active">
|
|
<NavItems themeBtn="vl-btn1" />
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-3 col-md-6 col-6 text-end">
|
|
<div className="vl-hero-btn d-none d-lg-block text-end">
|
|
<span className="vl-btn-wrap text-end">
|
|
<button
|
|
onClick={() => setIsPopupOpen(true)}
|
|
className="vl-btn1"
|
|
style={{ border: 'none' }}
|
|
suppressHydrationWarning
|
|
>
|
|
Get Started Now <i className="fa-solid fa-angle-right"></i>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
<div className="vl-header-action-item d-block d-lg-none">
|
|
<button type="button" className="vl-offcanvas-toggle" onClick={toggleMobileMenu} suppressHydrationWarning>
|
|
<i className="fa-solid fa-bars-staggered"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<MobileMenu isMobileMenuOpen={isMobileMenuOpen} toggleMobileMenu={toggleMobileMenu} themeBtn="vl-btn1" />
|
|
<ContactPopup isOpen={isPopupOpen} onClose={() => setIsPopupOpen(false)} />
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Header;
|