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

Return ( <> <div className="absolute inset 0 bg custom bg bg cover bg no repeat w screen flex flex col justify center items center" style={{ backgroundImage: `url(${fondo})`, filter: "opacity(24%)" }} ></div> <div className="relative"> {/* Botón de menú hamburguesa para móviles, centrado */} <div className="flex justify center p 4"> <button onClick={() => setMenuOpen((prev) => !prev)} className="text white focus:outline none" > {/* Icono de menú hamburguesa o cruz */} {menuOpen ? ( <svg className="w 8 h 8" fill="none" viewBox="0 0 24 24" stroke="currentColor" > <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /> </svg> ) : ( <svg className="w 8 h 8" fill="none" viewBox="0 0 24 24" stroke="currentColor" > <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16m 7 6h7" /> </svg> )} </button> </div> {/* Menú hamburguesa */} {menuOpen && ( <div className={`fixed top 0 left 0 w full h full bg white z 50 p 4 transition transform transform ${ menuOpen ? "translate y 0" : "translate y full" }`} > <div className="flex flex col h full justify center items center"> {categorias.map((categoria) => ( <button key={categoria.nombre} onClick={() => { setCategoriaSeleccionada(categoria.nombre); setMenuOpen(false); // Cerrar el menú después de seleccionar }} className="w full text left py 4 text black text lg" > {categoria.nombre} </button> ))} </div> </div> )} {/* Botones para seleccionar categoría en vista de escritorio */} <div className="hidden md:flex justify center"> {categorias.map((categoria) => ( <button key={categoria.nombre} onClick={() => setCategoriaSeleccionada(categoria.nombre)} className="w 40 m 5 shadow 2xl shadow black border none" > <span className="inset 0 z 50 flex justify center items center text white text lg font bold"> {categoria.nombre} </span> </button> ))} </div> {/* Renderiza la categoría seleccionada */} {categoriaSeleccionada && ( <CategoriaPostres titulo={categoriaSeleccionada} postres={postres} filtro={ categorias.find((cat) => cat.nombre === categoriaSeleccionada) ?.filtro || (() => false) } handlePostreChange={handlePostreChange} /> )} </div> </> ); en base a ese codigo necesito que el menu hamburguesa se centre arriba del todo de la pantalla en dispositivos mobiles y que el menu se despliegue con una animacion y tenga una cruz encima para cerrarlo, en pc no se tendria que ver el menu hamburguesa