Estoy haciendo Navbar y estoy un poco atascado. Aquí está mi código:
Navegación.jsx
import React, {useState} from "react"; import { NavData } from "./NavigationData"; import "../styles/Navigation.css" export default function Navigation() { const [isMouseOver, setIsMouseOver] = useState(false); return ( <nav className="navbar"> <a href="/">LOGO</a> <div className="menu"> <ul onMouseEnter={() => {setIsMouseOver(true)}} onMouseLeave={() => {setIsMouseOver(false)}}> {NavData.map((val, key) => { return ( <li key={key.id} onClick={() => window.location.pathname = val.link} > {isMouseOver ? (<div className="name">{val.name}</div>) : (<div className="icon">{val.icon}</div>) } </li> ) })} </ul> </div> </nav> ); }NavigationData.jsx
import React from "react"; import { FaHome, FaImages, FaShoppingBag, FaQuestionCircle, FaProductHunt } from "react-icons/fa"; export const NavData = [ { id: 1, name: "Home", icon: <FaHome />, link: "/home" }, { id: 2, name: "Gallery", icon: <FaImages />, link: "/gallery" }, { id: 3, name: "Products", icon: <FaProductHunt />, link: "/products" }, { id: 4, name: "Shop", icon: <FaShoppingBag />, link: "/shop" }, { id: 5, name: "About", icon: <FaQuestionCircle />, link: "/about" } ] @media screen and (max-width: 768px){ .name { display: none; } }Y la segunda pregunta es: ¿Cómo puedo sustituir el ícono por el texto cuando paso el mouse sobre cada ícono por separado? Por ejemplo, paso el cursor sobre el ícono de Inicio => desaparece y el texto Inicio aparece en su lugar. Gracias
Muy bien, primera pregunta, podemos usar CSS simple para esta solución. CSS le permite diseñar un elemento secundario cuando se pasa el mouse sobre su elemento principal, que es exactamente lo que necesitamos aquí.
En lugar de apuntar a un valor de ancho máximo, apuntaremos a un valor de ancho mínimo para reducir el código. Por lo tanto, agregue una clase a y cada texto e ícono de navegación y cada
<ul> {NavData.map((val, key) => { return ( <li className="childLI" key={key.id} onClick={() => (window.location.pathname = val.link)} > <div className="name">{val.name}</div> <div className="icon">{val.icon}</div> </li> ); })} </ul>y el CSS:
.name { display:none } @media screen and (min-width: 768px) { .childLI:hover .icon{ display:none; } .childLI:hover .name{ display:block; } }editar: no indica ni pasa el mouse por encima de las funciones.