I’m using DaisyUI with Tailwind CSS in a React TypeScript project. I’ve implemented a Navbar component, but it’s not responsive as expected. The hamburger menu doesn’t appear on smaller screens, and the horizontal navbar doesn’t hide on smaller or medium screens.

Problem

• The hamburger menu icon doesn’t show up on smaller screens.
• The horizontal navbar doesn’t hide on smaller or medium screens; it just compacts.

import React from "react";
import '../../App.css'

export const Navbar = () => {
  return (
    <div className="navbar bg-base-100">
      <div className="navbar-start">
        {/* Hamburger menu for small screens */}
        <div className="dropdown">
          <button tabIndex={0} className="btn btn-ghost lg:hidden">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              className="h-5 w-5"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor">
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
                d="M4 6h16M4 12h8m-8 6h16" />
            </svg>
          </button>
          <ul
            tabIndex={0}
            className="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow">
            <li><a>Item 1</a></li>
            <li>
              <a>Parent</a>
              <ul className="p-2">
                <li><a>Submenu 1</a></li>
                <li><a>Submenu 2</a></li>
              </ul>
            </li>
            <li><a>Item 3</a></li>
          </ul>
        </div>
        {/* Logo or Brand */}
        <a className="btn btn-ghost text-xl">daisyUI</a>
      </div>
      {/* Horizontal menu for large screens */}
      <div className="navbar-center hidden lg:flex">
        <ul className="menu menu-horizontal px-1">
          <li><a>Item 1</a></li>
          <li>
            <details>
              <summary>Parent</summary>
              <ul className="p-2">
                <li><a>Submenu 1</a></li>
                <li><a>Submenu 2</a></li>
              </ul>
            </details>
          </li>
          <li><a>Item 3</a></li>
        </ul>
      </div>
      <div className="navbar-end">
        <a className="btn">Button</a>
      </div>
    </div>
  )
}

Expected Behavior

• The horizontal navbar should hide on smaller and medium screens and be replaced by a hamburger menu.
• The hamburger menu should be clickable to show a dropdown menu on smaller and medium screens.

Current Behavior

• The horizontal navbar remains visible and just gets compacted on smaller and medium screens.
• The hamburger menu doesn’t appear on smaller screens.

Attempts to Fix

• Tailwind CSS Configuration: Verified that Tailwind CSS and DaisyUI are properly configured and imported.
• Class Adjustments: Tried using block lg:hidden for the hamburger menu and hidden lg:flex for the horizontal menu.
• CSS Debugging: Used browser developer tools to inspect elements and verify the applied classes.