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" } ]

1. Estoy comprobando si el mouse está entrando o saliendo de un ul y reemplazando los íconos con texto. Pero tampoco necesito mostrar texto cuando el tamaño de la pantalla es inferior a 768 px y solo mostrar íconos. En el momento en que el mouse está sobre los íconos desaparecen y debido a esto en CSS no veo nada:

 @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