flowbite
flowbite copied to clipboard
Published
20 hours ago •
themesberg
themesberg
MegaMenu doesnot work with object map (Nextjs13)
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.
