Estoy haciendo una aplicación de reacción con tailwindcss , y quiero hacer una barra de navegación móvil oculta y cuando el usuario haga clic en el ícono, aparecerá.
Así que quiero hacer una transición mientras aparece el menú.
Yo suelo:
Mi código:
MobileMenu.js:
function MobileMenu() { return ( <div className="block md:hidden px-4 py-3 text-white w-full bg-gray-800 border-t border-opacity-70 border-slate-700"> <div className="flex items-center mb-3 pb-3 border-b border-slate-700"> <img src="https://africaprime.com/wp-content/uploads/2020/04/ElonMusk.jpg" className="rounded-full w-8 h-8 cursor-pointer" /> <h6 className="ml-5 cursor-pointer">Elon Musk</h6> </div> <div className="mobile-nav-icon"> <ImHome size={20} /> <h4 className="ml-5">Home</h4> </div> <div className="mobile-nav-icon"> <HiUsers size={20} /> <h4 className="ml-5">Friends</h4> </div> <div className="mobile-nav-icon"> <CgProfile size={20} /> <h4 className="ml-5">My Profile</h4> </div> </div> ); } export default MobileMenu;Cómo lo muestro en Navbar.js:
function Navbar() { const [mobileMenuOpen, setMobileMenuOpen] = useState(false); return ( <> <nav className="flex justify-between items-center px-4 lg:px-8 py-3 bg-gray-900 text-white"> {/* Mobile Menu Icon */} <div className="block md:hidden p-2 cursor-pointer rounded-full hover:bg-gray-700 transition-2" onClick={() => setMobileMenuOpen(!mobileMenuOpen)} > <FiMenu size={20} /> </div> </nav> {/* Mobile Menu */} {mobileMenuOpen && <MobileMenu />} </> ); } export default Navbar;¡Gracias por adelantado!
Puede usar el paquete @framer/motion que le permite animar elementos fácilmente.
const menuVariants = { open: { opacity: 1, x: 0, }, closed: { opacity: 0, x: '-100%', }, } Las animaciones se pueden cambiar como quieras de acuerdo con los documentos de @framer/motion .
Y adjunte variantes a su componente <MobileMenu /> .
function MobileMenu({isMenuOpen}) { return ( <motion.div animate={isMenuOpen ? 'open' : 'closed'} variants={menuVariants}> className="block md:hidden px-4 py-3 text-white w-full bg-gray-800 border-t border-opacity-70 border-slate-700"> <div className="flex items-center mb-3 pb-3 border-b border-slate-700"> <img src="https://africaprime.com/wp-content/uploads/2020/04/ElonMusk.jpg" className="rounded-full w-8 h-8 cursor-pointer" /> <h6 className="ml-5 cursor-pointer">Elon Musk</h6> </div> <div className="mobile-nav-icon"> <ImHome size={20} /> <h4 className="ml-5">Home</h4> </div> <div className="mobile-nav-icon"> <HiUsers size={20} /> <h4 className="ml-5">Friends</h4> </div> <div className="mobile-nav-icon"> <CgProfile size={20} /> <h4 className="ml-5">My Profile</h4> </div> </div> ); } export default MobileMenu; Y puede pasar la variable isMenuOpen como accesorio.
function Navbar() { const [mobileMenuOpen, setMobileMenuOpen] = useState(false); return ( <> <nav className="flex justify-between items-center px-4 lg:px-8 py-3 bg-gray-900 text-white"> {/* Mobile Menu Icon */} <div className="block md:hidden p-2 cursor-pointer rounded-full hover:bg-gray-700 transition-2" onClick={() => setMobileMenuOpen(!mobileMenuOpen)} > <FiMenu size={20} /> </div> </nav> {/* Mobile Menu */} {mobileMenuOpen && <MobileMenu isMenuOpen={mobileMenuOpen}/>} </> ); } export default Navbar;