language implementation MERMS

components/layout/MobileMenu.js

@@ -1,80 +1,63 @@
 import Link from "next/link";
 import { useState } from "react";
+import { useTranslations } from "next-intl";
+
 export default function MobileMenu() {
-  const [isActive, setIsActive] = useState({
-    status: false,
-    key: "",
-  });
+  const t = useTranslations("Navigation");
+  const [isActive, setIsActive] = useState({ status: false, key: "" });
 
   const handleToggle = (key) => {
     if (isActive.key === key) {
-      setIsActive({
-        status: false,
-      });
+      setIsActive({ status: false });
     } else {
-      setIsActive({
-        status: true,
-        key,
-      });
+      setIsActive({ status: true, key });
     }
   };
+
   return (
     <>
       <ul className="wsmenu-list nav-theme">
-        {/* DROPDOWN SUB MENU */}
         <li aria-haspopup="true">
           <span
-            className={
-              isActive.key == 1 ? "wsmenu-click ws-activearrow" : "wsmenu-click"
-            }
+            className={isActive.key == 1 ? "wsmenu-click ws-activearrow" : "wsmenu-click"}
             onClick={() => handleToggle(1)}
           >
             <i className="wsmenu-arrow" />
           </span>
           <Link href="#" className="h-link">
-            About <span className="wsarrow" />
+            {t("about")} <span className="wsarrow" />
           </Link>
-          <ul
-            className="sub-menu"
-            style={{ display: `${isActive.key == 1 ? "block" : "none"}` }}
-          >
+          <ul className="sub-menu" style={{ display: `${isActive.key == 1 ? "block" : "none"}` }}>
             <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>
             </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>
-
-        {/* SIGN IN LINK */}
-        <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>
       </ul>