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() { export default function Menu() {
// const router = useRouter() // const router = useRouter()
return ( return (
<> <>
@ -32,26 +33,28 @@ export default function Menu() {
<li><Link href="/covid-19-updates">Covid-19-Updates</Link></li> <li><Link href="/covid-19-updates">Covid-19-Updates</Link></li>
</ul> </ul>
</li> </li>
<li className="dropdown"><Link href="/etobicoke-treatment-service">Services</Link> <li className="dropdown relative group" >
<ul> <Link href="/etobicoke-treatment-service" >
{servicesList.slice(0, 8).map(item => ( Services
<li key={item.id}> </Link>
<Link href={`/etobicoke-treatment-service/${item.slug}`}>
{item.shortTitle} {/* Dropdown */}
</Link> <ul className="absolute left-0 hidden group-hover:grid p-4
</li> 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> {/* <li className="dropdown"><Link href="/">Team</Link>
<ul> <ul>
<li><Link href="/team">Our Team</Link></li> <li><Link href="/team">Our Team</Link></li>