Using tailwindcss flowbite react Navbar.Toggle hamburger menu Does not work properly

Question

As I mention in my title Using tailwindcss and flowbite react Navbar. Toggle hamburger menu does not work properly.

I'm using flowbite react navbar component plugin for tailwindcss and got this weird hamburger menu with words in it. It supposes to be an icon instead of an Open main menu with an icon. Please refer to the code and image below for info.

Anyone had a solution for this?

Here is my code:

<Navbar
  fluid={true}
  rounded={false}>
  <Navbar.Brand className='container flex flex-wrap items-center justify-between  mx-auto'>
    <Link
      to='/'
      className='flex items-center'>
      <img
        src={Logo}
        className='h-6 mr-3 sm:h-9'
        alt='Flowbite Logo'
      />
      <span className='self-center text-xl font-semibold whitespace-nowrap dark:text-white'>
        Logo here
      </span>
    </Link>
    <div className='hidden lg:block'>
      <Link
        className='dark:text-white p-5'
        to='/'>
        Home
      </Link>
      <Link
        className='dark:text-white p-5'
        to='/academy'>
        Academy
      </Link>
      <Link
        className='dark:text-white p-5'
        to='/signal'>
        Signal
      </Link>
    </div>
    <div className='flex md:order-2'>
      {theme === 'dark' ? (
        <button
          onClick={handleThemeSwitch}
          type='button'
          className='text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-3 md:mr-0 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800'>
          Light Mode
        </button>
      ) : (
        <button
          onClick={handleThemeSwitch}
          type='button'
          className='text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-3 md:mr-0 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800'>
          Dark Mode
        </button>
      )}
    </div>
    <Navbar.Toggle />
    <Navbar.Collapse className='p-5'>
      <Link to='/'>
        <Navbar.Link>Home</Navbar.Link>
      </Link>
      <Link to='/academy'>
        <Navbar.Link>Academy</Navbar.Link>
      </Link>
      <Link to='/signal'>
        <Navbar.Link>Signal Group</Navbar.Link>
      </Link>
    </Navbar.Collapse>
  </Navbar.Brand>
</Navbar>

Answer 1

Nvm i will just revamp the whole thing manually instead using their navbar toggle

import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { Navbar } from 'flowbite-react';
import Logo from '../assets/logo.svg';
import { BsMenuUp } from 'react-icons/bs';
import { IconContext } from 'react-icons';

const Navigation = () => {
    const [theme, setTheme] = useState('light');
    const [toggle, setToggle] = useState(false);

    useEffect(() => {
        if (theme === 'dark') {
            document.documentElement.classList.add('dark');
        } else {
            document.documentElement.classList.remove('dark');
        }
    }, [theme]);

    const handleThemeSwitch = () => {
        setTheme(theme === 'dark' ? 'light' : 'dark');
    };

    return (
        <Navbar fluid={true} rounded={false}>
            <Navbar.Brand className="container flex flex-wrap items-center justify-between  mx-auto">
                <Link to="/" className="flex items-center">
                    <img src={Logo} className="h-6 mx-3 sm:h-9" alt="Flowbite Logo" />
                    <span className="self-center text-xl font-semibold whitespace-nowrap dark:text-white">
                        Some Logo Here
                    </span>
                </Link>
                <div className="hidden lg:block">
                    <Link className="dark:text-white p-5" to="/">
                        Home
                    </Link>
                    <Link className="dark:text-white p-5" to="/academy">
                        Academy
                    </Link>
                    <Link className="dark:text-white p-5" to="/signal">
                        About
                    </Link>
                </div>
                <div className="flex md:order-2">
                    {theme === 'dark' ? (
                        <button
                            onClick={handleThemeSwitch}
                            type="button"
                            className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-3 md:mr-0 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
                        >
                            Light Mode
                        </button>
                    ) : (
                        <button
                            onClick={handleThemeSwitch}
                            type="button"
                            className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-3 md:mr-0 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
                        >
                            Dark Mode
                        </button>
                    )}
                    <div className="lg:hidden flex align-middle justify-center p-1 text-gray-800 dark:text-white">
                        <IconContext.Provider value={{ size: 30 }}>
                            <BsMenuUp onClick={(e) => setToggle(!toggle)} />
                        </IconContext.Provider>
                    </div>
                </div>
            </Navbar.Brand>
            {toggle ? (
                <div className="p-2 m-5 bg-white dark:bg-gray-600 rounded-lg dark:text-white w-full">
                    <div>
                        <Navbar.Link as={Link} to="/">
                            Home
                        </Navbar.Link>

                        <Navbar.Link as={Link} to="/academy">
                            Academy
                        </Navbar.Link>

                        <Navbar.Link as={Link}>About</Navbar.Link>
                        
                    </div>
                </div>
            ) : null}
        </Navbar>
    );
};

export default Navigation;