I am making Navbar and I am a little bit stuck. Here is my code:

Navigation.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  onm ouseEnter={() => {setIsMouseOver(true)}}
                onm ouseLeave={() => {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. I am checking if mouse is Entering or Leaving an ul and substituting icons with text. But as well I don't need to show text when screen size is below 768px and just show icons. At the moment when mouse is over icons disappears and because of this in CSS I see nothing:

@media screen and (max-width: 768px){

    .name {
        display: none;
    }
}

And the second question is: How can I substitute icon for the text when I hover on every single icon separately. E.g. I hover over Home icon => it disappears and the text Home appears on its place. Thanks

CodePudding user response：

Alright first question, we can use plain CSS for this solution. CSS allows you to style a child element when its parent is hovered which is exactly what we need here.

Instead of targeting a max-width value we'll target a min-width value to reduce code. So, add a class to the and each nav text and icon and each

 <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>

 .name {
    display:none
  }


  @media screen and (min-width: 768px) {
    .childLI:hover  .icon{
      display:none;
    }
    .childLI:hover  .name{
      display:block;
    }
  }