67 lines
2.1 KiB
JavaScript
67 lines
2.1 KiB
JavaScript
import Link from "next/link";
|
|
import { useState } from "react";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
export default function MobileMenu() {
|
|
const t = useTranslations("Navigation");
|
|
const [isActive, setIsActive] = useState({ status: false, key: "" });
|
|
|
|
const handleToggle = (key) => {
|
|
if (isActive.key === key) {
|
|
setIsActive({ status: false });
|
|
} else {
|
|
setIsActive({ status: true, key });
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<ul className="wsmenu-list nav-theme">
|
|
<li aria-haspopup="true">
|
|
<span
|
|
className={isActive.key == 1 ? "wsmenu-click ws-activearrow" : "wsmenu-click"}
|
|
onClick={() => handleToggle(1)}
|
|
>
|
|
<i className="wsmenu-arrow" />
|
|
</span>
|
|
<Link href="#" className="h-link">
|
|
{t("about")} <span className="wsarrow" />
|
|
</Link>
|
|
<ul className="sub-menu" style={{ display: `${isActive.key == 1 ? "block" : "none"}` }}>
|
|
<li aria-haspopup="true">
|
|
<Link href="#merms-about">{t("whyMerms")}</Link>
|
|
</li>
|
|
<li aria-haspopup="true">
|
|
<Link href="#merms-works">{t("howItWorks")}</Link>
|
|
</li>
|
|
<li aria-haspopup="true">
|
|
<Link href="/contacts">{t("contactUs")}</Link>
|
|
</li>
|
|
<li aria-haspopup="true">
|
|
<Link href="/faqs">F.A.Q.</Link>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li className="nl-simple" aria-haspopup="true">
|
|
<Link href="#merms-features" className="h-link">
|
|
{t("features")}
|
|
</Link>
|
|
</li>
|
|
<li className="nl-simple reg-fst-link mobile-last-link" aria-haspopup="true">
|
|
<Link href={process.env.NEXT_PUBLIC_LOGIN_URL} className="h-link">
|
|
{t("signIn")}
|
|
</Link>
|
|
</li>
|
|
<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"
|
|
>
|
|
{t("signUp")}
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</>
|
|
);
|
|
}
|