82 lines
2.5 KiB
TypeScript
82 lines
2.5 KiB
TypeScript
"use client";
|
||
|
||
import Image from "next/image";
|
||
import { useEffect, useRef, useState, useTransition } from "react";
|
||
import chevron from "./icons/chevron-down.svg";
|
||
import check from "./icons/check.svg";
|
||
import { useParams, useRouter } from "next/navigation";
|
||
import { LANGUAGES } from "./variables";
|
||
import { usePathname } from "@/shared/config/navigation";
|
||
|
||
const NavLanguage = () => {
|
||
const [openMenu, setOpenMenu] = useState<boolean>(false);
|
||
const menuRef: React.RefObject<HTMLDivElement> = useRef(null);
|
||
|
||
const router = useRouter();
|
||
const pathname = usePathname();
|
||
const { locale } = useParams();
|
||
|
||
const [_, startTransition] = useTransition();
|
||
const [language, setLanguage] = useState<string>(locale as string);
|
||
|
||
useEffect(() => {
|
||
const params = window.location.search || "";
|
||
startTransition(() => {
|
||
router.replace(`/${language}${pathname}${params}`, {
|
||
scroll: false,
|
||
});
|
||
});
|
||
}, [language]);
|
||
|
||
useEffect(() => {
|
||
function handleClickOutside(event: any) {
|
||
if (menuRef.current && !menuRef.current.contains(event.target)) {
|
||
setOpenMenu(false);
|
||
}
|
||
}
|
||
document.addEventListener("mousedown", handleClickOutside);
|
||
return () => {
|
||
document.removeEventListener("mousedown", handleClickOutside);
|
||
};
|
||
}, [menuRef]);
|
||
|
||
return (
|
||
<div ref={menuRef} className="relative">
|
||
<button
|
||
onClick={() => setOpenMenu((prev) => !prev)}
|
||
className="flex items-center gap-[6px]"
|
||
>
|
||
{language === "ru" && <span>Рус</span>}
|
||
{language === "kg" && <span>Кырг</span>}
|
||
{language === "en" && <span>Eng</span>}
|
||
<Image src={chevron} alt="chevron icon" />
|
||
</button>
|
||
{openMenu && (
|
||
<div className="min-w-[130px] absolute top-[120%]">
|
||
{LANGUAGES.map((lang) => (
|
||
<button
|
||
className={`px-[10px] py-[14px] w-full flex font-extrabold justify-start bg-white${
|
||
language === lang.index
|
||
? "px-[10px] py-[14px] w-full flex font-extrabold justify-start bg-[#f9fafb] items-center"
|
||
: ""
|
||
}`}
|
||
onClick={() => {
|
||
setLanguage(lang.index);
|
||
setOpenMenu(false);
|
||
}}
|
||
key={lang.id}
|
||
>
|
||
{lang.language}
|
||
{lang.index === language ? (
|
||
<Image src={check} alt="check icon" />
|
||
) : null}
|
||
</button>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default NavLanguage;
|