From 4506edd0284f6dc0d599ca11b4d62feb2366837d Mon Sep 17 00:00:00 2001
From: vidhubk <vidhu.bk@gmail.com>
Date: Sat, 30 Aug 2025 12:53:47 +0530
Subject: [PATCH] service menu 4 column update

---
 components/layout/Menu.js | 41 +++++++++++++++++++++------------------
 1 file changed, 22 insertions(+), 19 deletions(-)

diff --git a/components/layout/Menu.js b/components/layout/Menu.js
index 2f240c9..e2b9f3f 100644
--- a/components/layout/Menu.js
+++ b/components/layout/Menu.js
@@ -7,6 +7,7 @@ import { servicesList } from "@/utils/Services.utils"
 export default function Menu() {
     // const router = useRouter()
 
+
     return (
         <>
 
@@ -32,26 +33,28 @@ export default function Menu() {
                         <li><Link href="/covid-19-updates">Covid-19-Updates</Link></li>
                     </ul>
                 </li>
-                <li className="dropdown"><Link href="/etobicoke-treatment-service">Services</Link>
-                    <ul>
-                      {servicesList.slice(0, 8).map(item => (
-                        <li key={item.id}>
-                            <Link href={`/etobicoke-treatment-service/${item.slug}`}>
-                            {item.shortTitle}
-                            </Link>
-                        </li>
-                        ))}
+               <li className="dropdown relative group" >
+  <Link href="/etobicoke-treatment-service" >
+    Services
+  </Link>
+
+  {/* Dropdown */}
+  <ul className="absolute left-0 hidden group-hover:grid p-4
+                 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"
+      style={{ columnCount: 4, width:"800px" }}> 
+    {servicesList.map((item) => (
+      <li key={item.id} className="break-inside-avoid">
+        <Link
+          href={`/etobicoke-treatment-service/${item.slug}`}
+         
+        >
+          {item.shortTitle}
+        </Link>
+      </li>
+    ))}
+  </ul>
+</li>
 
-                        {/* Show "More Services" only if there are more than 6 items */}
-                        {servicesList.length > 8 && (
-                        <li>
-                            <Link href="/etobicoke-treatment-service" >
-                            More Services
-                            </Link>
-                        </li>
-                        )}
-                    </ul>
-                </li>
                 {/* <li className="dropdown"><Link href="/">Team</Link>
                                 <ul>
                                     <li><Link href="/team">Our Team</Link></li>