Open slamer59 opened 10 months ago
Describe the bug Mega menu works when I write the statically but not when using a mapped object.
"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:
Expected behavior Should work when writting dynamically
Desktop (please complete the following information):
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.
Describe the bug Mega menu works when I write the
To Reproduce Steps to reproduce the behavior:
Expected behavior Should work when writting dynamically
Desktop (please complete the following information):
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.