service menu 4 column update
This commit is contained in:
parent
0683160ada
commit
4506edd028
@ -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 className="dropdown"><Link href="/">Team</Link>
|
||||
<ul>
|
||||
<li><Link href="/team">Our Team</Link></li>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user