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:

kantehead

p116594

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;