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">
        <div className="menu-backdrop" onClick={handleMobileMenu} />
        <div className="close-btn" onClick={handleMobileMenu}><span className="far fa-times" /></div>
        <nav className="menu-box">
          <div className="nav-logo">
            <Link href="/">
              <img src="/assets/images/logo-2.png" alt="" />
            </Link>
          </div>
          <div className="menu-outer">
            <div
              className="collapse navbar-collapse show clearfix"
              id="navbarSupportedContent">
              <ul className="navigation clearfix">
                <li><Link href="/">Home</Link></li>
                <li className={isActive.key == 1 ? "dropdown current" : "dropdown"}>
                  <Link href="/about-us" >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>
                {/* <li><Link href="/about-us">About</Link></li> */}
                <li className={isActive.key == 2 ? "dropdown current" : "dropdown"}>
                  <Link href="/etobicoke-treatment-service">Services</Link>
                  <ul style={{ display: `${isActive.key == 2 ? "block" : "none"}` }}>
                    {/* <li><Link href="/service" onClick={handleMobileMenu}>Our Services</Link></li>
                    <li><Link href="/service-details" onClick={handleMobileMenu}>Cardioligy</Link></li>
                                        <li><Link href="/service-details-2" onClick={handleMobileMenu}>Dental Clinic</Link></li>
                                        <li><Link href="/service-details-3" onClick={handleMobileMenu}>NeuroSergery</Link></li>
                                        <li><Link href="/service-details-4" onClick={handleMobileMenu}>Medical</Link></li>
                                        <li><Link href="/service-details-5" onClick={handleMobileMenu}>Pediatrics</Link></li>
                                        <li><Link href="/service-details-6" onClick={handleMobileMenu}>Modern Laboratory</Link></li> */}

                    {servicesList.map(item => (
                      <li key={item.id}>
                        <Link href={`/etobicoke-treatment-service/${item.slug}`}>
                          {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>

                <li className={isActive.key == 3 ? "dropdown current" : "dropdown"}>
                  <Link href="/area-of-injury">Area of Injury</Link>
                  <ul style={{ display: `${isActive.key == 3 ? "block" : "none"}` }}>
                    {/* <li><Link href="/team" onClick={handleMobileMenu}>Our Team</Link></li>
                        <li><Link href="/team-details" onClick={handleMobileMenu}>Team Details</Link></li> */}


                    {areaOfInjuryData.map(item => (
                      <li key={item.id}>
                        <Link href={`/area-of-injury/${item.slug}`}>
                          {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>


                <li className={isActive.key == 4 ? "dropdown current" : "dropdown"}>
                  <Link href="/rehabilitation">Rehabilitation</Link>
                  <ul style={{ display: `${isActive.key == 4 ? "block" : "none"}` }}>
                    {/* <li className={isActive.subMenuKey == 5 ? "dropdown current" : "dropdown"}><Link href="/#">News</Link>
                          <ul style={{ display: `${isActive.subMenuKey == 5 ? "block" : "none"}` }}>
                          <li><Link href="/blog" onClick={handleMobileMenu}>Blog Grid</Link></li>
                              <li><Link href="/blog-2" onClick={handleMobileMenu}>Blog Sidebar</Link></li>
                              <li><Link href="/blog-details" onClick={handleMobileMenu}>Blog Details</Link></li>
                          </ul>
                          <div className={isActive.subMenuKey == 5 ? "dropdown-btn open" : "dropdown-btn"} onClick={() => handleToggle(4,5)}><span className="fa fa-angle-right" /></div>
                      </li> */}

                    {Rehabilitation.map(item => (
                      <li key={item.id}>
                        <Link href={`/rehabilitation/${item.slug}`}>
                          {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>

                <li className={isActive.key == 5 ? "dropdown current" : "dropdown"}>
                  <Link href="/accident">Accident</Link>
                  <ul style={{ display: `${isActive.key == 5 ? "block" : "none"}` }}>
                    {/* <li className={isActive.subMenuKey == 5 ? "dropdown current" : "dropdown"}><Link href="/#">News</Link>
                          <ul style={{ display: `${isActive.subMenuKey == 5 ? "block" : "none"}` }}>
                          <li><Link href="/blog" onClick={handleMobileMenu}>Blog Grid</Link></li>
                              <li><Link href="/blog-2" onClick={handleMobileMenu}>Blog Sidebar</Link></li>
                              <li><Link href="/blog-details" onClick={handleMobileMenu}>Blog Details</Link></li>
                          </ul>
                          <div className={isActive.subMenuKey == 5 ? "dropdown-btn open" : "dropdown-btn"} onClick={() => handleToggle(4,5)}><span className="fa fa-angle-right" /></div>
                      </li> */}

                    {Rehabilitation.map(item => (
                      <li key={item.id}>
                        <Link href={`/rehabilitation/${item.slug}`}>
                          {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>
                <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>
          <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">647-722-3434</Link></li>
              <li><Link href="mailto:bloor@rapharehab.ca">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="/"><span className="fab fa-twitter"></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>
              <li><Link href="/"><span className="fab fa-pinterest-p"></span></Link></li>
              <li><Link href="/"><span className="fab fa-youtube"></span></Link></li>
            </ul>
          </div>
        </nav>
      </div>{/* End Mobile Menu */}
      <div className="nav-overlay" style={{ display: `${isSidebar ? "block" : "none"}` }} onClick={handleSidebar} />
    </>
  );
};