Kene-s-Cribs-Website/src/shared-components/navbar-component/Navbar.js

71 lines
2.1 KiB
JavaScript

import React from "react";
import { Link, withRouter } from "react-router-dom";
import "./Navbar.css";
import logo from "./logo2.png";
/* eslint-disable jsx-a11y/anchor-is-valid */
import { useTranslation } from "react-i18next";
const Navbar = () => {
const { t } = useTranslation();
return (
/* Nav Bar */
<div className="Navbar">
<nav class="navbar navbar-expand-lg navbar-dark">
<img src={logo} alt="" width="40" height="40"></img>
<a href="/" class="navbar-brand">
{t("Nav_brand")}
</a>
<button
className="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarTogglerDemo02"
aria-controls="navbarTogglerDemo02"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<Link className="nav-link" exact to="/">
{t("Nav_Home")}
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/listings">
{t("Nav_Listings")}
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/agents">
{t("Nav_Agents")}
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/contact-us">
{t("Nav_Contact_Us")}
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/listing-page">
{t("Nav_listing_page")}
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/login">
{t("Nav_Login")}
</Link>
</li>
</ul>
</div>
</nav>
</div>
);
};
export default withRouter(Navbar);