From 6b62aafca4380b1468ae2dc4d4dd9d7ef00b2f88 Mon Sep 17 00:00:00 2001
From: vidhubk <vidhu.bk@gmail.com>
Date: Fri, 29 Aug 2025 17:31:01 +0530
Subject: [PATCH] Header Menu - Services, Mobile Menu - all pages

---
 .../[slug]/page.js                            |   4 +-
 app/layout.js                                 |   4 +-
 components/layout/Menu.js                     |  18 ++--
 components/layout/MobileMenu.js               | 102 +++++++++++++-----
 4 files changed, 92 insertions(+), 36 deletions(-)

diff --git a/app/etobicoke-treatment-service/[slug]/page.js b/app/etobicoke-treatment-service/[slug]/page.js
index f16294e..db09138 100644
--- a/app/etobicoke-treatment-service/[slug]/page.js
+++ b/app/etobicoke-treatment-service/[slug]/page.js
@@ -19,7 +19,9 @@ export default function ServiceDetailPage({ params }) {
   }
 
   return (
-    <Layout headerStyle={2} footerStyle={1} breadcrumbTitle={service.shortTitle}>
+    <Layout headerStyle={2} footerStyle={1} 
+    breadcrumbTitle={service.shortTitle}  
+    bannerImage={service.bannerImage}>
       <ServiceDetailClient slug={slug} service={service} servicesList={servicesList} />
     </Layout>
   );
diff --git a/app/layout.js b/app/layout.js
index 72cc823..750919d 100644
--- a/app/layout.js
+++ b/app/layout.js
@@ -8,8 +8,8 @@ import "swiper/css/pagination"
 import 'swiper/css/free-mode';
 import { poppins } from '@/lib/font'
 export const metadata = {
-    title: 'Medimart Template',
-    description: 'Generated by create next app',
+    title: 'Best Pain Relief & Physiotherapy - Repharehab Clinic',
+    description: 'Best pain relief physiotherapy clinic',
 }
 
 export default function RootLayout({ children }) {
diff --git a/components/layout/Menu.js b/components/layout/Menu.js
index e715840..7920f24 100644
--- a/components/layout/Menu.js
+++ b/components/layout/Menu.js
@@ -3,6 +3,7 @@ import Link from "next/link"
 import Rehabilitation from "@/utils/Rehabilitation.utils"
 import Accident from "@/utils/Accident.utils"
 import { areaOfInjuryData } from "@/utils/AreaOfInjery.utils"
+import { servicesList } from "@/utils/Services.utils"
 export default function Menu() {
     // const router = useRouter()
 
@@ -33,14 +34,13 @@ export default function Menu() {
                 </li>
                 <li className="dropdown"><Link href="/">Services</Link>
                     <ul>
-                        <li><Link href="/service">Our Services</Link></li>
-                        <li><Link href="/service-details">Cardiology</Link></li>
-                        <li><Link href="/service-details-2">Dental Clinic</Link></li>
-                        <li><Link href="/service-details-3">Neurosurgery</Link></li>
-                        <li><Link href="/service-details-4">Medical</Link></li>
-                        <li><Link href="/service-details-5">Pediatrics</Link></li>
-                        <li><Link href="/service-details-6">Modern Laboratory</Link></li>
-                        {/* ... (similarly for other service items) */}
+                        {servicesList.map(item => (
+                            <li key={item.id}>
+                                <Link href={`/etobicoke-treatment-service/${item.slug}`}>
+                                    {item.shortTitle}
+                                </Link>
+                            </li>
+                        ))}
                     </ul>
                 </li>
                 {/* <li className="dropdown"><Link href="/">Team</Link>
@@ -108,7 +108,7 @@ export default function Menu() {
                 </li>
 
                 {/* Contact */}
-                <li><Link href="/contact">Contact</Link></li>
+                <li><Link href="/contact-us">Contact</Link></li>
             </ul>
 
         </>
diff --git a/components/layout/MobileMenu.js b/components/layout/MobileMenu.js
index 235baea..59c34c6 100644
--- a/components/layout/MobileMenu.js
+++ b/components/layout/MobileMenu.js
@@ -1,6 +1,11 @@
 '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({
@@ -41,62 +46,111 @@ export default function MobileMenu({ isSidebar, handleMobileMenu, handleSidebar
               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="/" >Home</Link>
+                  <Link href="/" >About Us</Link>
                   <ul style={{ display: `${isActive.key == 1 ? "block" : "none"}` }}>
-                    <li><Link href="/"onClick={handleMobileMenu}>Home Page One</Link></li>
-                    <li><Link href="/index-2" onClick={handleMobileMenu}>Home Page Two</Link></li>
-                    <li><Link href="/index-3" onClick={handleMobileMenu}>Home Page Three</Link></li>
-                    <li><Link href="/onepage" onClick={handleMobileMenu}>One Page Home</Link></li>
+                   
+                    <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>
                   </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><Link href="/about-us">About</Link></li> */}
                 <li className={isActive.key == 2 ? "dropdown current" : "dropdown"}>
-                  <Link href="/#">Services</Link>
+                  <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" 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>
+                                        <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="/#">Team</Link>
+                      <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>
+                        {/* <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="/#">Pages</Link>
+                  <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>
+                        {/* <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>
-                      <li><Link href="/tesmonial" onClick={handleMobileMenu}>Tesmonial</Link></li>
-                        <li><Link href="/works" onClick={handleMobileMenu}>How it works</Link></li>
-                        <li><Link href="/chooseus" onClick={handleMobileMenu}>Why Choose Us</Link></li>
-                        <li><Link href="/pricing-table" onClick={handleMobileMenu}>Pricing-Table</Link></li>
-                        <li><Link href="/faq" onClick={handleMobileMenu}>Faq's</Link></li>
-                        <li><Link href="/gallery" onClick={handleMobileMenu}>Gallery</Link></li>
-                        <li><Link href="/appointment" onClick={handleMobileMenu}>Make Appointment</Link></li>
-                        <li><Link href="/error-page" onClick={handleMobileMenu}>Page Not Found</Link></li>
+                      </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><Link href="/contact" onClick={handleMobileMenu}>Contact</Link></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-us" onClick={handleMobileMenu}>Contact</Link></li>
               </ul>
             </div>
           </div>