rapharehap/components/layout/MobileMenu.js

'use client'
import Link from "next/link";
import { useState } from "react";
import { servicesList } from "@/utils/Services.utils";
import { areaOfInjuryData } from "@/utils/AreaOfInjery.utils";
import Rehabilitation from "@/utils/Rehabilitation.utils";
import Accident from "@/utils/Accident.utils";

export default function MobileMenu({ isSidebar, handleMobileMenu, handleSidebar }) {
  const [isActive, setIsActive] = useState({
    status: false,
    key: "",
    subMenuKey: "",
  });

  const handleToggle = (key, subMenuKey = "") => {
    if (isActive.key === key && isActive.subMenuKey === subMenuKey) {
      setIsActive({
        status: false,
        key: "",
        subMenuKey: "",
      });
    } else {
      setIsActive({
        status: true,
        key,
        subMenuKey,
      });
    }
  };

  return (
    <>
      <div className="mobile-menu">
        {/* Backdrop for closing */}
        <div className="menu-backdrop" onClick={handleMobileMenu} />
        {/* Close button */}
        <div className="close-btn" onClick={handleMobileMenu}>
          <span className="far fa-times" />
        </div>

        {/* Mobile Navigation */}
        <nav className="menu-box">
          <div className="nav-logo">
            <Link href="/" onClick={handleMobileMenu}>
              <img src="/assets/images/logo-2.png" alt="Logo" />
            </Link>
          </div>

          <div className="menu-outer">
            <div
              className="collapse navbar-collapse show clearfix"
              id="navbarSupportedContent"
            >
              <ul className="navigation clearfix">

                {/* Home */}
                <li>
                  <Link href="/" onClick={handleMobileMenu}>Home</Link>
                </li>

                {/* About Us */}
                <li className={isActive.key == 1 ? "dropdown current" : "dropdown"}>
                  <Link href="/about-us" onClick={handleMobileMenu}>About Us</Link>
                  <ul style={{ display: `${isActive.key == 1 ? "block" : "none"}` }}>
                    <li><Link href="/our-team-physiotherapy-etobicoke" onClick={handleMobileMenu}>Our Team</Link></li>
                    <li><Link href="/ourapproach-physiotherapy-etobicoke" onClick={handleMobileMenu}>Our Approach</Link></li>
                    <li><Link href="/gallery-physiotherapy-etobicoke" onClick={handleMobileMenu}>Gallery</Link></li>
                    <li><Link href="/covid-19-updates" onClick={handleMobileMenu}>Covid-19 Updates</Link></li>
                  </ul>
                  <div
                    className={isActive.key == 1 ? "dropdown-btn open" : "dropdown-btn"}
                    onClick={() => handleToggle(1)}
                  >
                    <span className="fa fa-angle-right" />
                  </div>
                </li>

                {/* Services */}
                <li className={isActive.key == 2 ? "dropdown current" : "dropdown"}>
                  <Link href="/etobicoke-treatment-service" onClick={handleMobileMenu}>Services</Link>
                  <ul style={{ display: `${isActive.key == 2 ? "block" : "none"}` }}>
                    {servicesList.map((item) => (
                      <li key={item.id}>
                        <Link href={`/etobicoke-treatment-service/${item.slug}`} onClick={handleMobileMenu}>
                          {item.shortTitle}
                        </Link>
                      </li>
                    ))}
                  </ul>
                  <div
                    className={isActive.key == 2 ? "dropdown-btn open" : "dropdown-btn"}
                    onClick={() => handleToggle(2)}
                  >
                    <span className="fa fa-angle-right" />
                  </div>
                </li>

                {/* Area of Injury */}
                <li className={isActive.key == 3 ? "dropdown current" : "dropdown"}>
                  <Link href="/area-of-injury" onClick={handleMobileMenu}>Area of Injury</Link>
                  <ul style={{ display: `${isActive.key == 3 ? "block" : "none"}` }}>
                    {areaOfInjuryData.map((item) => (
                      <li key={item.id}>
                        <Link href={`/area-of-injury/${item.slug}`} onClick={handleMobileMenu}>
                          {item.title}
                        </Link>
                      </li>
                    ))}
                  </ul>
                  <div
                    className={isActive.key == 3 ? "dropdown-btn open" : "dropdown-btn"}
                    onClick={() => handleToggle(3)}
                  >
                    <span className="fa fa-angle-right" />
                  </div>
                </li>

                {/* Rehabilitation */}
                <li className={isActive.key == 4 ? "dropdown current" : "dropdown"}>
                  <Link href="/rehabilitation" onClick={handleMobileMenu}>Rehabilitation</Link>
                  <ul style={{ display: `${isActive.key == 4 ? "block" : "none"}` }}>
                    {Rehabilitation.map((item) => (
                      <li key={item.id}>
                        <Link href={`/rehabilitation/${item.slug}`} onClick={handleMobileMenu}>
                          {item.title}
                        </Link>
                      </li>
                    ))}
                  </ul>
                  <div
                    className={isActive.key == 4 ? "dropdown-btn open" : "dropdown-btn"}
                    onClick={() => handleToggle(4)}
                  >
                    <span className="fa fa-angle-right" />
                  </div>
                </li>

                {/* Accident */}
                <li className={isActive.key == 5 ? "dropdown current" : "dropdown"}>
                  <Link href="/accident" onClick={handleMobileMenu}>Accident</Link>
                  <ul style={{ display: `${isActive.key == 5 ? "block" : "none"}` }}>
                    {Accident.map((item) => (
                      <li key={item.id}>
                        <Link href={`/accident/${item.slug}`} onClick={handleMobileMenu}>
                          {item.title}
                        </Link>
                      </li>
                    ))}
                  </ul>
                  <div
                    className={isActive.key == 5 ? "dropdown-btn open" : "dropdown-btn"}
                    onClick={() => handleToggle(5)}
                  >
                    <span className="fa fa-angle-right" />
                  </div>
                </li>

                {/* Contact */}
                <li><Link href="/contact" onClick={handleMobileMenu}>Contact</Link></li>
                <li><Link href="/why-rapha-physiotherapy-etobicoke" onClick={handleMobileMenu}>Why Us</Link></li>
                <li><Link href="/faq-physiotherapy-etobicoke" onClick={handleMobileMenu}>Faq</Link></li>
                <li><Link href="/what-to-expect" onClick={handleMobileMenu}>What To Expect</Link></li>
                <li><Link href="/payment-insurance" onClick={handleMobileMenu}>Payment And Insurance</Link></li>
              </ul>
            </div>
          </div>

          {/* Contact Info */}
          <div className="contact-info">
            <h4>Contact Info</h4>
            <ul>
              <li>6 – 4335 Bloor Street West Etobicoke, M9C5S2</li>
              <li><Link href="tel:+647-722-3434, +416-622-2873" onClick={handleMobileMenu}>+647-722-3434, +416-622-2873</Link></li>
              <li><Link href="mailto:bloor@rapharehab.ca" onClick={handleMobileMenu}>bloor@rapharehab.ca</Link></li>
            </ul>
          </div>

          {/* Social Links */}
          <div className="social-links">
            <ul className="clearfix">
              <li><Link href="https://www.instagram.com/elrapharehab/" target="_blank" rel="noopener noreferrer"><span className="fab fa-instagram"></span></Link></li>
              <li><Link href="https://www.facebook.com/ELRaphaRehabCenter/" target="_blank" rel="noopener noreferrer"><span className="fab fa-facebook-square"></span></Link></li>
            </ul>
          </div>
        </nav>
      </div>

      {/* Sidebar Overlay */}
      <div
        className="nav-overlay"
        style={{ display: `${isSidebar ? "block" : "none"}` }}
        onClick={handleSidebar}
      />
    </>
  );
}