Before you create any component, create a component subfolder inside the src
folder, then create a NAv.js component inside the component subfolder
In addition, create an images subfolder inside the src
folder, download the following images, and put them there:
Our Nav components codes look as shown in the snippet below:
import KanteHead from "../images/kantehead.png";
// Reloads the windo any thime invoked
const handleClick = () => {
return window.location.reload();
};
const Nav = () => {
return (
<div>
<nav className="navbar">
<div className="logo">
<a href="#" onClick={handleClick}>
<img src={KanteHead} alt="N'golo Kante" className="kante-pic" />
</a>
<a href="#">
<h1 className="logo-text">
KANTE <br /> QUOTES
</h1>
</a>
</div>
<ul>
<li>
<a href="#"> Random Quote</a>
</li>
</ul>
</nav>
</div>
);
};
export default Nav;