themesberg / themesberg/flowbite
MegaMenu doesnot work with object map (Nextjs13)
Open
Nobody has claimed this yet.
- Dominant language
- HTML
- Stars
- 9.4k
- Forks
- 862
- PR merge metrics
- No merged PRs in 30d
Description
Describe the bug
Mega menu works when I write the
"use client"
const MegaMenu: FC<Record<string, never>> = function () {
/**
* Init menu items data
*/
const menuItems = [
{
"id": "TWVudUl0ZW06MjM=",
"name": "Electricité solaire",
"category": {
"id": "Q2F0ZWdvcnk6MTE=",
"slug": "electricite-solaire",
},
"children": [
{
"id": "TWVudUl0ZW06Mjg=",
"name": "Basique",
"category": {
"id": "Q2F0ZWdvcnk6MTI=",
"slug": "kitsolaire",
},
},
{
"id": "TWVudUl0ZW06Mjk=",
"name": "Sur Mesure",
"category": {
"id": "Q2F0ZWdvcnk6MTM=",
"slug": "devis-sur-mesure",
},
"collection": null,
"page": null,
"url": null
}
],
"url": null
},
{
"id": "TWVudUl0ZW06MjQ=",
"name": "Eau chaude sanitaire",
"category": {
"id": "Q2F0ZWdvcnk6MjE=",
"slug": "chauffe-eau",
},
"children": [
{
"children": [],
"id": "TWVudUl0ZW06MzA=",
"name": "Chauffe eau solaire gravité",
"category": {
"id": "Q2F0ZWdvcnk6MjM=",
"slug": "chauffe-eau-gravite",
},
}]
}
]
return (
<nav className="bg-white border-gray-200 dark:border-gray-600 dark:bg-gray-900">
<div className="flex flex-wrap items-center justify-between max-w-screen-xl p-4 mx-auto">
<a href="https://flowbite.com" className="flex items-center">
<img src="https://flowbite.com/docs/images/logo.svg" className="h-8 mr-3" alt="Flowbite Logo" />
<span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
</a>
<button data-collapse-toggle="mega-menu-full-cta" type="button" className="inline-flex items-center justify-center w-10 h-10 p-2 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mega-menu-full-cta" aria-expanded="false">
<span className="sr-only">Open main menu</span>
<svg className="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M1 1h15M1 7h15M1 13h15" />
</svg>
</button>
<div id="mega-menu-full-cta" className="items-center justify-between hidden w-full md:flex md:w-auto md:order-1">
<ul className="flex flex-col mt-4 font-medium md:flex-row md:space-x-8 md:mt-0">
{menuItems.map((menuItem) => (
// menuItem.children?.map((item) => (
<li>
<button
type="button"
id={`mega-menu-full-cta-dropdown-button-${menuItem.id}`}
data-collapse-toggle={`mega-menu-full-cta-dropdown-${menuItem.id}`}
data-dropdown-placement="bottom"
className="flex items-center justify-between w-full py-2 pl-3 pr-4 font-medium text-gray-900 border-b border-gray-100 md:w-auto hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-600 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 md:dark:hover:bg-transparent dark:border-gray-700">
{menuItem.name}
<svg className="w-2.5 h-2.5 ml-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m1 1 4 4 4-4" />
</svg>
</button>
</li>
))}
<li>
<button
type="button"
id="mega-menu-full-cta-dropdown-button"
data-collapse-toggle="mega-menu-full-cta-dropdown"
data-dropdown-placement="bottom"
className="flex items-center justify-between w-full py-2 pl-3 pr-4 font-medium text-gray-900 border-b border-gray-100 md:w-auto hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-600 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 md:dark:hover:bg-transparent dark:border-gray-700">
comp
<svg className="w-2.5 h-2.5 ml-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m1 1 4 4 4-4" />
</svg></button>
</li>
</ul>
</div>
</div>
<div id="mega-menu-full-cta-dropdown" className="mt-1 bg-white border-gray-200 shadow-sm border-y dark:bg-gray-800 dark:border-gray-600">
<div className="grid max-w-screen-xl px-4 py-5 mx-auto text-sm text-gray-500 dark:text-gray-400 md:grid-cols-3 md:px-6">
<ul className="space-y-4 sm:mb-4 md:mb-0" aria-labelledby="mega-menu-full-cta-button">
<li>
<a href="#" className="hover:underline hover:text-blue-600 dark:hover:text-blue-500">
Yes!
</a>
</li>
<li>
<a href="#" className="hover:underline hover:text-blue-600 dark:hover:text-blue-500">
Segmentation
</a>
</li>
<li>
<a href="#" className="hover:underline hover:text-blue-600 dark:hover:text-blue-500">
Marketing CRM
</a>
</li>
<li>
<a href="#" className="hover:underline hover:text-blue-600 dark:hover:text-blue-500">
Online Stores
</a>
</li>
</ul>
<ul className="hidden mb-4 space-y-4 md:mb-0 sm:block">
<li>
<a href="#" className="hover:underline hover:text-blue-600 dark:hover:text-blue-500">
Our Blog
</a>
</li>
<li>
<a href="#" className="hover:underline hover:text-blue-600 dark:hover:text-blue-500">
Terms & Conditions
</a>
</li>
<li>
<a href="#" className="hover:underline hover:text-blue-600 dark:hover:text-blue-500">
License
</a>
</li>
<li>
<a href="#" className="hover:underline hover:text-blue-600 dark:hover:text-blue-500">
Resources
</a>
</li>
</ul>
<div className="mt-4 md:mt-0">
<h2 className="mb-2 font-semibold text-gray-900 dark:text-white">Our brands</h2>
<p className="mb-2 text-gray-500 dark:text-gray-400">At Flowbite, we have a portfolio of brands that cater to a variety of preferences.</p>
<a href="#" className="inline-flex items-center text-sm font-medium text-blue-600 hover:underline hover:text-blue-600 dark:text-blue-500 dark:hover:text-blue-700">
Explore our brands
<span className="sr-only">Explore our brands </span>
<svg className="w-3 h-3 ml-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M1 5h12m0 0L9 1m4 4L9 9" />
</svg>
</a>
</div>
</div>
</div>
{menuItems.map((menuItem) => (
<div id={`mega-menu-full-cta-dropdown-${menuItem.id}`} className="mt-1 bg-white border-gray-200 shadow-sm border-y dark:bg-gray-800 dark:border-gray-600">
<div className="grid max-w-screen-xl px-4 py-5 mx-auto text-sm text-gray-500 dark:text-gray-400 md:grid-cols-3 md:px-6">
{menuItem.children?.map((item) => (
<ul className="space-y-4 sm:mb-4 md:mb-0" aria-labelledby={`mega-menu-full-cta-button-${item.name}`}>
<li>
<a href="#" className="hover:underline hover:text-blue-600 dark:hover:text-blue-500">
{item.name}
</a>
</li>
</ul>
))}
<div className="mt-4 md:mt-0">
<h2 className="mb-2 font-semibold text-gray-900 dark:text-white">Our brands</h2>
<p className="mb-2 text-gray-500 dark:text-gray-400">At Flowbite, we have a portfolio of brands that cater to a variety of preferences.</p>
<a href="#" className="inline-flex items-center text-sm font-medium text-blue-600 hover:underline hover:text-blue-600 dark:text-blue-500 dark:hover:text-blue-700">
Explore our brands
<span className="sr-only">Explore our brands </span>
<svg className="w-3 h-3 ml-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M1 5h12m0 0L9 1m4 4L9 9" />
</svg>
</a>
</div>
</div>
</div>
))}
</nav>
)
};
export default MegaMenu;
To Reproduce
Steps to reproduce the behavior:
- Click on any button doesnot toggle the megamenu
- Click on Company button works
Expected behavior
Should work when writting dynamically
Desktop (please complete the following information):
-
OS: Ubuntu 20
-
Browser Chrome
-
Version Version 117.0.5938.149 (Build officiel) (64 bits)
"flowbite": "^1.8.1",
"flowbite-react": "^0.6.4",
"next": "^13.4.7",
"tailwindcss": "3.3.2",
Additional context
Add any other context about the problem here.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the MegaMenu component shown in the report and reproduce the behavior in Next.js 13 using the mapped menuItems data. Compare the mapped buttons with the working Company button; done means clicking each mapped button toggles its corresponding megamenu.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- next.js, tailwindcss, typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100