MetatronLatestWebsite/src/components/common/Offcanvas.tsx

"use client";
import React, { useState } from "react";
import Link from "next/link";

const mobileNavItems = [
    { title: "Home", link: "/" },
    {
        title: "Service",
        link: "/services-digital-solutions",
        children: [
            { title: 'ERP Development & Implementation', link: '/services-digital-solutions/erp-development-implementation' },
            { title: "Website Development", link: "/services-digital-solutions/website-development-company" },
            { title: "Mobile Application Development", link: "/services-digital-solutions/mobile-application-development" },
            { title: "Graphic Designing", link: "/services-digital-solutions/graphic-designing-company" },
            { title: "UI / UX Designing", link: "/services-digital-solutions/ui-ux-designing" },
            { title: "SEO & Content Writing", link: "/services-digital-solutions/search-engine-optimization-seo-content-writing" },
            { title: "Digital Marketing", link: "/services-digital-solutions/digital-marketing-agency-in-canada" },
        ],
    },
    { title: "Portfolio", link: "/portfolio" },
    { title: "About", link: "/about-us" },
    { title: "Careers", link: "/careers" },
    { title: "Blog", link: "/blog" },
    { title: "Contact", link: "/contact" },
    { title: "FAQ", link: "/faq" },
];

const Offcanvas = () => {
    const [openIndex, setOpenIndex] = useState<number | null>(null);

    const closeOffcanvas = () => {
        document.querySelector(".offcanvas__info")?.classList.remove("info-open");
        document.querySelector(".offcanvas__overlay")?.classList.remove("overlay-open");
    };

    return (
        <>
            <div className="fix">
                <div className="offcanvas__info">
                    <div className="offcanvas__wrapper">
                        <div className="offcanvas__content">
                            <div className="offcanvas__top-spacer pt-40"></div>

                            <div className="offcanvas__search mb-25">
                                <p className="text-white">
                                    Metatroncube Software Solutions: Where innovation meets execution to elevate your digital presence. Partner with us for bespoke web and app development that powers your business growth.
                                </p>
                            </div>

                            {/* ── Static React Mobile Nav (replaces jQuery meanmenu) ── */}
                            <nav className="offcanvas-nav mb-40">
                                <ul>
                                    {mobileNavItems.map((item, idx) => (
                                        <li key={idx}>
                                            <div className="offcanvas-nav__row">
                                                <Link href={item.link} onClick={closeOffcanvas}>
                                                    {item.title}
                                                </Link>
                                                {item.children && (
                                                    <button
                                                        className="offcanvas-nav__toggle"
                                                        onClick={() => setOpenIndex(openIndex === idx ? null : idx)}
                                                        aria-label="toggle submenu"
                                                    >
                                                        <i className={`fa-solid fa-${openIndex === idx ? "minus" : "plus"}`}></i>
                                                    </button>
                                                )}
                                            </div>
                                            {item.children && openIndex === idx && (
                                                <ul className="offcanvas-submenu">
                                                    {item.children.map((child, cidx) => (
                                                        <li key={cidx}>
                                                            <Link href={child.link} onClick={closeOffcanvas}>
                                                                {child.title}
                                                            </Link>
                                                        </li>
                                                    ))}
                                                </ul>
                                            )}
                                        </li>
                                    ))}
                                </ul>
                            </nav>

                            <div className="offcanvas__contact mt-30 mb-20">
                                <h4>Contact Info</h4>
                                <ul>
                                    <li className="d-flex align-items-center">
                                        <div className="offcanvas__contact-icon">
                                            <i className="fa-solid fa-location-dot"></i>
                                        </div>
                                        <div className="offcanvas__contact-text">
                                            <a target="_blank" href="#">Waterloo, Ontario Canada</a>
                                        </div>
                                    </li>
                                    <li className="d-flex align-items-center">
                                        <div className="offcanvas__contact-icon">
                                            <i className="fa-solid fa-phone"></i>
                                        </div>
                                        <div className="offcanvas__contact-text">
                                            <a href="tel:+1-647-679-7651">+1-647-679-7651</a>
                                        </div>
                                    </li>
                                    <li className="d-flex align-items-center">
                                        <div className="offcanvas__contact-icon">
                                            <i className="fa-solid fa-envelope"></i>
                                        </div>
                                        <div className="offcanvas__contact-text">
                                            <a href="mailto:info@metatroncubesolutions.com">info@metatroncubesolutions.com</a>
                                        </div>
                                    </li>
                                </ul>
                            </div>

                            <div className="offcanvas__social">
                                <ul>
                                    <li>
                                        <a href="https://www.facebook.com/metatroncubecanada" target="_blank" rel="noopener noreferrer">
                                            <i className="fab fa-facebook-f"></i>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="https://x.com/MetatroncubeDA" target="_blank" rel="noopener noreferrer">
                                            <i className="fab fa-twitter"></i>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="https://www.youtube.com/@metatron_digitalagency" target="_blank" rel="noopener noreferrer">
                                            <i className="fab fa-youtube"></i>
                                        </a>
                                    </li>
                                    <li>
                                        <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>
                                    </li>
                                    <li>
                                        <a href="https://www.instagram.com/metatron_digitalagency" target="_blank" rel="noopener noreferrer">
                                            <i className="fab fa-instagram"></i>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="offcanvas__overlay" onClick={closeOffcanvas}></div>
            <div className="offcanvas__overlay-white"></div>
        </>
    );
};

export default Offcanvas;