121 lines
3.6 KiB
JavaScript
121 lines
3.6 KiB
JavaScript
import React, { useEffect } from "react";
|
|
import { Link, withRouter } from "react-router-dom";
|
|
import "./Navbar.css";
|
|
import logo from "./logo2.png";
|
|
import Cookies from "js-cookie";
|
|
/* eslint-disable jsx-a11y/anchor-is-valid */
|
|
import { useTranslation } from "react-i18next";
|
|
import i18next from "i18next";
|
|
const langauges = [
|
|
{
|
|
code: "fr",
|
|
name: "Français",
|
|
country_code: "fr",
|
|
},
|
|
{
|
|
code: "en",
|
|
name: "English",
|
|
country_code: "gb",
|
|
},
|
|
];
|
|
|
|
const Navbar = () => {
|
|
const currentLanguageCode = Cookies.get("i18next") || "en";
|
|
const currentLanguage = langauges.find(
|
|
(lang) => lang.code === currentLanguageCode
|
|
);
|
|
const { t } = useTranslation();
|
|
useEffect(() => {
|
|
document.body.dir = currentLanguage.dir || "ltr";
|
|
}, [currentLanguage]);
|
|
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">
|
|
<div class="btn-group">
|
|
<button
|
|
type="button"
|
|
class="btn btn-link dropdown-toggle"
|
|
data-toggle="dropdown"
|
|
aria-haspopup="true"
|
|
aria-expanded="false"
|
|
>
|
|
<i class="fas fa-globe"></i>
|
|
</button>
|
|
<div class="dropdown-menu">
|
|
{langauges.map(({ code, name, country_code }) => (
|
|
<button
|
|
class="dropdown-item"
|
|
key={code}
|
|
onClick={() => i18next.changeLanguage(code)}
|
|
disabled={code === currentLanguageCode}
|
|
>
|
|
<span
|
|
className={`flag-icon flag-icon-${country_code} mx-2`}
|
|
></span>
|
|
{name}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<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);
|