87 lines
4.5 KiB
TypeScript
87 lines
4.5 KiB
TypeScript
"use client";
|
|
import React from 'react';
|
|
import Link from 'next/link';
|
|
|
|
interface MobileMenuProps {
|
|
isMobileMenuOpen: boolean;
|
|
toggleMobileMenu: () => void;
|
|
themeBtn?: string;
|
|
arrow?: boolean;
|
|
arrow2?: boolean;
|
|
}
|
|
|
|
const navItems = [
|
|
{ title: 'Home', link: '#home' },
|
|
{ title: 'About', link: '#about' },
|
|
{ title: 'Services', link: '#services' },
|
|
{ title: 'Portfolio', link: '#portfolio' },
|
|
{ title: 'FAQ', link: '#faq' },
|
|
{ title: 'Contact', link: '#contact-trigger' },
|
|
];
|
|
|
|
const MobileMenu: React.FC<MobileMenuProps> = ({ isMobileMenuOpen, toggleMobileMenu }) => {
|
|
return (
|
|
<div className="homepage1-body">
|
|
<div className={`vl-offcanvas ${isMobileMenuOpen ? 'vl-offcanvas-open' : ''}`}>
|
|
<div className="vl-offcanvas-wrapper">
|
|
<div className="vl-offcanvas-header d-flex justify-content-between align-items-center">
|
|
<div className="vl-offcanvas-logo">
|
|
<Link href="#home" onClick={toggleMobileMenu}>
|
|
<img loading="lazy" src="/assets/img/logo.webp" alt="logo" style={{ width: '100%', maxWidth: '250px', height: 'auto' }} />
|
|
</Link>
|
|
</div>
|
|
<div className="vl-offcanvas-close">
|
|
<button className="vl-offcanvas-close-toggle" onClick={toggleMobileMenu}>
|
|
<i className="fa-solid fa-xmark"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="vl-offcanvas-menu d-lg-none mb-40">
|
|
<nav>
|
|
<ul>
|
|
{navItems.map((item, index) => (
|
|
<li key={index}>
|
|
<Link
|
|
href={item.link}
|
|
onClick={(e) => {
|
|
if (item.link === '#contact-trigger') {
|
|
e.preventDefault();
|
|
window.dispatchEvent(new CustomEvent('openContactPopup'));
|
|
}
|
|
toggleMobileMenu();
|
|
}}
|
|
>
|
|
{item.title}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
|
|
<div className="space20"></div>
|
|
<div className="vl-offcanvas-info">
|
|
<h3 className="vl-offcanvas-sm-title mb-2">Contact Us</h3>
|
|
<span><a href="tel:+16476797651"><i className="fa-solid fa-phone"></i> +1-647-679-7651</a></span>
|
|
<span><a href="mailto:info@metatroncubesolutions.com"><i className="fa-regular fa-envelope"></i> info@metatroncubesolutions.com</a></span>
|
|
</div>
|
|
|
|
<div className="space20"></div>
|
|
<div className="vl-offcanvas-social">
|
|
<h3 className="vl-offcanvas-sm-title mb-2">Follow Us</h3>
|
|
<a href="https://www.facebook.com/metatroncubecanada" target="_blank" rel="noopener noreferrer"><i className="fab fa-facebook-f"></i></a>
|
|
<a href="https://x.com/MetatroncubeDA" target="_blank" rel="noopener noreferrer"><i className="fa-brands fa-twitter"></i></a>
|
|
<a href="https://www.linkedin.com/company/metatroncube-software-solutions/posts/?feedView=all" target="_blank" rel="noopener noreferrer"><i className="fab fa-linkedin-in"></i></a>
|
|
<a href="https://www.instagram.com/metatron_digitalagency" target="_blank" rel="noopener noreferrer"><i className="fab fa-instagram"></i></a>
|
|
<a href="https://www.youtube.com/@metatron_digitalagency" target="_blank" rel="noopener noreferrer"><i className="fab fa-youtube"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={`vl-offcanvas-overlay ${isMobileMenuOpen ? 'vl-offcanvas-overlay-open' : ''}`} onClick={toggleMobileMenu}></div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MobileMenu;
|