service menu 4 column update

This commit is contained in:
vidhubk 2025-08-30 12:53:47 +05:30
parent 0683160ada
commit 4506edd028

View File

@ -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}`}>
<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>
))}
{/* 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>
{/* <li className="dropdown"><Link href="/">Team</Link>
<ul>
<li><Link href="/team">Our Team</Link></li>