Hamburger Menu - Copy this React, Tailwind Component to your project

{isOpen && ( <nav className="md:hidden absolute inset-0 min-h-screen backdrop-blur-md bg-white/70 border border-white/20 z-40 flex flex-col items-center justify-center space-y-8 px-4"> {/* Logo con ombra */} <div className="flex flex-col items-center justify-center"> <img src="/images/logo-demetra.png" alt="Logo" className="w-36 h-36 object-contain " /> </div> {/* Account + Balance in un unico riquadro */} <div className="w-full max-w-xs bg-white/80 rounded-xl px-4 py-3 text-center shadow-md border border-gray-200 space-y-1"> {/* Indirizzo abbreviato */} <div className="font-mono text-sm text-gray-700"> {account ? `${account.slice(0, 6)}...${account.slice(-4)}` : '0x...'} </div> {/* Balance */} <div className="text-green-900 font-semibold"> {balance} </div> </div> {/* Navigazione */} <div className="flex flex-col items-center space-y-4"> {navItems.map((item) => ( <Link key={item.id} to={item.to} className="text-lg text-green-700 hover:text-orange-400 px-4 py-2 rounded-xl font-semibold transition-colors duration-200 bg-white/90 shadow-sm border border-white/40" onClick={() => setIsOpen(false)} > {item.name} </Link> ))} </div> </nav> )}