language implementation MERMS

components/layout/Menu.js

@@ -1,63 +1,55 @@
 import Link from "next/link";
-import { useRouter } from "next/router";
+import { useTranslations } from "next-intl";
+import LanguageSwitcher from "../elements/LanguageSwitcher";
 
 export default function Menu() {
-  const router = useRouter();
-
+  const t = useTranslations("Navigation");
   return (
     <>
       <ul className="wsmenu-list nav-theme">
-        {/* DROPDOWN SUB MENU */}
         <li aria-haspopup="true">
           <Link href="/#" className="h-link">
-            About <span className="wsarrow" />
+            {t("about")} <span className="wsarrow" />
           </Link>
           <ul className="sub-menu">
             <li aria-haspopup="true">
-              <Link href="/#merms-about">Why MERMS?</Link>
+              <Link href="/#merms-about">{t("whyMerms")}</Link>
             </li>
             <li aria-haspopup="true">
-              <Link href="/#merms-works">How It Works</Link>
+              <Link href="/#merms-works">{t("howItWorks")}</Link>
             </li>
             <li aria-haspopup="true">
-              <Link href="/contacts">Contacts Us</Link>
+              <Link href="/contacts">{t("contactUs")}</Link>
             </li>
             <li aria-haspopup="true">
-              {/*<Link href="/faqs">F.A.Q.</Link>*/}
-              <Link href="/help-center">Help Center</Link>
+              <Link href="/help-center">{t("helpCenter")}</Link>
             </li>
           </ul>
         </li>
-        {/* SIMPLE NAVIGATION LINK */}
         <li className="nl-simple" aria-haspopup="true">
           <Link href="/#merms-features" className="h-link">
-            Features
+            {t("features")}
           </Link>
         </li>
-
         <li className="nl-simple" aria-haspopup="true">
           <Link href="/merms-blog" className="h-link">
-            Forum
+            {t("forum")}
           </Link>
         </li>
-
-        <li
-          className="nl-simple reg-fst-link mobile-last-link"
-          aria-haspopup="true"
-        >
+        <li className="nl-simple reg-fst-link mobile-last-link" aria-haspopup="true">
           <Link href={process.env.NEXT_PUBLIC_LOGIN_URL} className="h-link">
-            Sign in
+            {t("signIn")}
           </Link>
         </li>
-        {/* SIGN UP BUTTON */}
         <li className="nl-simple" aria-haspopup="true">
           <Link
             href={process.env.NEXT_PUBLIC_SIGNUP_URL}
             className="btn r-04 btn--theme hover--tra-white last-link"
           >
-            Sign up
+            {t("signUp")}
           </Link>
         </li>
+        <LanguageSwitcher />
       </ul>
     </>
   );