232 lines
9.6 KiB
JavaScript
232 lines
9.6 KiB
JavaScript
'use client'
|
||
import Link from "next/link";
|
||
import { useState, useEffect } 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 [email, setEmail] = useState("");
|
||
|
||
useEffect(() => {
|
||
const user = "bloor";
|
||
const domain = "rapharehab.ca";
|
||
setEmail(`${user}@${domain}`);
|
||
}, []);
|
||
|
||
const handleToggle = (key, subMenuKey = "") => {
|
||
if (isActive.key === key && isActive.subMenuKey === subMenuKey) {
|
||
setIsActive({
|
||
status: false,
|
||
key: "",
|
||
subMenuKey: "",
|
||
});
|
||
} else {
|
||
setIsActive({
|
||
status: true,
|
||
key,
|
||
subMenuKey,
|
||
});
|
||
}
|
||
};
|
||
|
||
// ✅ Always close menu after clicking a link
|
||
const closeMenu = () => {
|
||
if (typeof handleMobileMenu === "function") {
|
||
handleMobileMenu();
|
||
}
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<div className="mobile-menu">
|
||
{/* Backdrop */}
|
||
<div className="menu-backdrop" onClick={closeMenu} />
|
||
{/* Close button */}
|
||
<div className="close-btn" onClick={closeMenu}>
|
||
<span className="far fa-times" />
|
||
</div>
|
||
|
||
{/* Mobile Navigation */}
|
||
<nav className="menu-box">
|
||
{/* Header row (Logo left, Social icons right) */}
|
||
<div className="nav-header">
|
||
<div className="nav-logo">
|
||
<Link href="/" onClick={closeMenu} aria-label="Logo2 image">
|
||
<img src="/assets/images/logo-2.png" alt="Logo" />
|
||
</Link>
|
||
</div>
|
||
<div className="nav-social">
|
||
<ul className="clearfix">
|
||
<li>
|
||
<Link href="https://www.instagram.com/elrapharehab/" aria-label="Instagram Link" target="_blank" rel="noopener noreferrer" onClick={closeMenu}>
|
||
<span className="fab fa-instagram"></span>
|
||
</Link>
|
||
</li>
|
||
<li>
|
||
<Link href="https://www.facebook.com/ELRaphaRehabCenter/" aria-label="Facebook Link" target="_blank" rel="noopener noreferrer" onClick={closeMenu}>
|
||
<span className="fab fa-facebook-square"></span>
|
||
</Link>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Menu Items */}
|
||
<div className="menu-outer">
|
||
<div className="collapse navbar-collapse show clearfix" id="navbarSupportedContent">
|
||
<ul className="navigation clearfix">
|
||
|
||
<li>
|
||
<Link href="/" onClick={closeMenu} aria-label="Home">Home</Link>
|
||
</li>
|
||
|
||
{/* About Us */}
|
||
<li className={isActive.key == 1 ? "dropdown current" : "dropdown"}>
|
||
<Link href="/about-us" onClick={closeMenu} aria-label="About Us">About Us</Link>
|
||
<ul style={{ display: `${isActive.key == 1 ? "block" : "none"}` }}>
|
||
<li><Link href="/our-team-physiotherapy-etobicoke" onClick={closeMenu} aria-label="Out Team">Our Team</Link></li>
|
||
<li><Link href="/our-approach-physiotherapy-etobicoke" onClick={closeMenu} aria-label="Our approach">Our Approach</Link></li>
|
||
<li><Link href="/gallery-physiotherapy-etobicoke" onClick={closeMenu} aria-label="Gallery">Gallery</Link></li>
|
||
<li><Link href="/covid-19-updates-etobicoke" onClick={closeMenu} aria-label="Covid-19 Updates">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={closeMenu} aria-label="Services">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={closeMenu} aria-label="Etobicoke Treatment Service">
|
||
{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={closeMenu} aria-label="Area of injury">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={closeMenu} aria-label="Area of injury title">
|
||
{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={closeMenu} aria-label="Rehabilitation">Rehabilitation</Link>
|
||
<ul style={{ display: `${isActive.key == 4 ? "block" : "none"}` }}>
|
||
{Rehabilitation.map((item) => (
|
||
<li key={item.id}>
|
||
<Link href={`/rehabilitation/${item.slug}`} onClick={closeMenu} aria-label="Rehabilitation title">
|
||
{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={closeMenu} aria-label="Accident">Accident</Link>
|
||
<ul style={{ display: `${isActive.key == 5 ? "block" : "none"}` }}>
|
||
{Accident.map((item) => (
|
||
<li key={item.id}>
|
||
<Link href={`/accident/${item.slug}`} onClick={closeMenu} aria-label="Accident title">
|
||
{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>
|
||
|
||
{/* Other Links */}
|
||
<li><Link href="/contact" onClick={closeMenu} aria-label="Contact">Contact</Link></li>
|
||
<li><Link href="/blog" onClick={closeMenu} aria-label="Blog">Blog</Link></li>
|
||
<li><Link href="/why-choose-us" onClick={closeMenu} aria-label="Why Us">Why Us</Link></li>
|
||
<li><Link href="/faq" onClick={closeMenu} aria-label="Faq">Faq</Link></li>
|
||
<li><Link href="/what-to-expect" onClick={closeMenu} aria-label="What to expect">What To Expect</Link></li>
|
||
<li><Link href="/payment-insurance" onClick={closeMenu} aria-label="Payment and insurance">Payment And Insurance</Link></li>
|
||
{/* <li><Link href="/refugee-physiotherapy" onClick={closeMenu}>Refugee Physiotherapy</Link></li> */}
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Contact Info */}
|
||
<div className="contact-info">
|
||
<h4>Contact Info</h4>
|
||
<ul>
|
||
<li>5 – 4335 Bloor Street West Etobicoke, M9C 2A5</li>
|
||
<li>
|
||
<Link href="tel:+647-722-3434, +416-622-2873" onClick={closeMenu} aria-label="+647-722-3434">
|
||
+647-722-3434, +416-622-2873
|
||
</Link>
|
||
</li>
|
||
<li>
|
||
{email ? (
|
||
<Link href={`mailto:${email}`} onClick={closeMenu} aria-label={email}>
|
||
{email}
|
||
</Link>
|
||
) : (
|
||
<span>Loading...</span>
|
||
)}
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
|
||
{/* Sidebar Overlay */}
|
||
<div
|
||
className="nav-overlay"
|
||
style={{ display: `${isSidebar ? "block" : "none"}` }}
|
||
onClick={handleSidebar}
|
||
/>
|
||
</>
|
||
);
|
||
} |