Currently, I am developing a project with React.js using HTML, CSS, and JavaScript. My goal is to enhance the visual appeal of the active navigation item in the navbar by adding a white border around it. This way, the border will remain visible while the corresponding page is open.
import React, { useState } from "react";
import { Link } from "react-router-dom";
import "./Navbar.css";
import { navItems } from "./NavItems";
import Dropdown from "./Dropdown";
function Navbar() {
const [dropdown, setDropdown] = useState(false);
return (
<>
<nav className="navbar">
<ul className="nav-items">
{navItems.map((item) => {
if (item.id === "C3") {
return (
<li
key={item.id}
className={item.cName}
id={window.location.pathname === item.path? "C10":""}
onMouseClick={() => setDropdown(true)}
onMouseEnter={() => setDropdown(true)}
onMouseLeave={() => setDropdown(false)}
>
<Link to={item.title}>{item.title}</Link>
{dropdown && <Dropdown />}
</li>
);
}
return (
<li key={item.id}
className={item.cName}
id={window.location.pathname === item.path? "C10":""}
>
<Link to={item.path}>{item.title}</Link>
</li>
);
})}
</ul>
</nav>
</>
);
}
export default Navbar;
The following is the stylesheet (CSS) used:
.nav-item a:hover {
border: solid 2px white;
}
#C10{
border: solid 2px white;
}
I attempted to apply the white border using the CSS code snippet below:
.nav-item a:active {
border: solid 2px white;
}
Even after implementing the CSS in both the stylesheet and JavaScript file, the desired effect was not achieved!
id={window.location.pathname === item.path? "C10":""}
#C10{
border: solid 2px white;
}