Mobile Navbar Hamburger Menu Not Showing in Flowbite Next.js 15

I'm currently using the Flowbite navbar from https://flowbite.com/docs/components/navbar/ into my project. While the navbar functions correctly on desktop, however I've encountered an issue on mobile devices: the hamburger menu fails to appear when clicked. This behavior is unexpected and disrupts the intended responsive design of the navbar.

To provide context, my project is built using the latest version of Next.js (v15). I've followed the integration steps outlined in Flowbite's documentation to implement the navbar component. The desktop view displays the navbar with all functionalities, including dropdowns and links, working as expected. However, when switching to mobile view, clicking the hamburger icon, which is supposed to toggle the menu visibility, does not yield any visible changes.

Could you please advise on potential reasons for this behavior and any troubleshooting steps I could undertake? Your insights would be greatly appreciated to resolve this mobile display issue effectively.

import type { Metadata } from "next";
import { Poppins } from "next/font/google";
import "./globals.css";

const poppins = Poppins({ subsets: ["latin"], weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" data-theme="cupcake">
      <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
      </head>
      <body className={poppins.className}>
        {/* <section className="max-w-6xl py-4 mx-auto px-4"> */}
        <nav className="bg-white border-gray-200 dark:bg-gray-900 rounded-xl">
          <div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-8 p-4 sm:p-3">
            <a href="https://flowbite.com/" className="flex items-center space-x-3 rtl:space-x-reverse">
              <img src="https://flowbite.com/docs/images/logo.svg" className="h-8" alt="Flowbite Logo" />
              <span className="self-center text-2xl sm:text-xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
            </a>
            <button
              data-collapse-toggle="navbar-default"
              type="button"
              className="inline-flex items-center p-2 w-9 h-9 justify-center 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="navbar-default"
              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" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15" />
              </svg>
            </button>
            <div className="hidden w-full md:block md:w-auto" id="navbar-default">
              <ul className="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
                <li>
                  <a
                    href="#"
                    className="block py-2 px-3 text-white bg-aksen1 rounded md:bg-transparent md:text-aksen1 md:p-0 dark:text-white md:dark:text-taksen1"
                    aria-current="page"
                  >
                    Home
                  </a>
                </li>
                <li>
                  <a
                    href="#"
                    className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-aksen1 md:p-0 dark:text-white md:dark:hover:text-taksen1 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"
                  >
                    About
                  </a>
                </li>
                <li>
                  <a
                    href="#"
                    className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-aksen1 md:p-0 dark:text-white md:dark:hover:text-taksen1 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"
                  >
                    Portofolio
                  </a>
                </li>
                <li>
                  <a
                    href="#"
                    className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-aksen1 md:p-0 dark:text-white md:dark:hover:text-taksen1 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"
                  >
                    Contact
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </nav>
        {/* </section> */}

        {children}

themesberg / flowbite

Mobile Navbar Hamburger Menu Not Showing in Flowbite Next.js 15 #903