text: import React from "react";
  
  // We import bootstrap to make our application look better.
  import "bootstrap/dist/css/bootstrap.css";
  
  // We import NavLink to utilize the react router.
  import { NavLink } from "react-router-dom";
  
  // Here, we display our Navbar
  const Navbar = () => {
    return (
      <div>
        <nav className="navbar navbar-expand-lg navbar-light bg-light">
          <NavLink className="navbar-brand" to="/">
            Hello, 
          </NavLink>
          <button
            className="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span className="navbar-toggler-icon"></span>
          </button>
  
          <div className="collapse navbar-collapse" id="navbarSupportedContent">
            <ul className="navbar-nav ml-auto">
              <li className="nav-item">
                <NavLink className="nav-link" to="/searchrecord">
                  Me
                </NavLink>
              </li>
            </ul>
          </div>
  
          <div className="collapse navbar-collapse" id="navbarSupportedContent">
            <ul className="navbar-nav ml-auto">
              <li className="nav-item">
                <NavLink className="nav-link" to="/searchrecord">
                  Search Flights
                </NavLink>
              </li>
            </ul>
          </div>
  
          <div className="collapse navbar-collapse" id="navbarSupportedContent">
            <ul className="navbar-nav ml-auto">
              <li className="nav-item">
                <NavLink className="nav-link" to="/create">
                  Available Flights
                </NavLink>
              </li>
            </ul>
          </div>
  
          <div className="collapse navbar-collapse" id="navbarSupportedContent">
            <ul className="navbar-nav ml-auto">
              <li className="nav-item">
                <NavLink className="nav-link" to="/create">
                  My Flights
                </NavLink>
              </li>
            </ul>
          </div>
  
          <div className="collapse navbar-collapse" id="navbarSupportedContent">
            <ul className="navbar-nav ml-auto">
              <li className="nav-item">
                <NavLink className="nav-link" to="/create">
                  Itinerary
                </NavLink>
              </li>
            </ul>
          </div>
  
        </nav>
      </div>
    );
  };
  
  export default Navbar;
  