111 lines
3.4 KiB
TypeScript
111 lines
3.4 KiB
TypeScript
import { LINKS } from "@/shared/variables/links";
|
|
import { Link, usePathname } from "@/shared/config/navigation";
|
|
import { useEffect, useState, useTransition } from "react";
|
|
import { useParams, useRouter } from "next/navigation";
|
|
import chevron_down from "./icons/chevron_down.svg";
|
|
import Image from "next/image";
|
|
import NavAuth from "../NavAuth/NavAuth";
|
|
|
|
interface INavMenuProps {
|
|
setOpenMenu: (boolean: boolean) => void;
|
|
}
|
|
|
|
const NavMenu: React.FC<INavMenuProps> = ({ setOpenMenu }: INavMenuProps) => {
|
|
const [openMenuLanguage, setOpenMenuLanguage] = useState<boolean>(false);
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
const { locale } = useParams();
|
|
|
|
const [_, startTransition] = useTransition();
|
|
const [currentLanguage, setCurrentLanguage] = useState<string>(
|
|
locale as string
|
|
);
|
|
|
|
useEffect(() => {
|
|
const params = window.location.search || "";
|
|
startTransition(() => {
|
|
router.replace(`/${currentLanguage}${pathname}${params}`, {
|
|
scroll: false,
|
|
});
|
|
});
|
|
}, [currentLanguage]);
|
|
|
|
const langKeys: Record<string, string> = {
|
|
ru: "Русский",
|
|
kg: "Кыргызча",
|
|
en: "English",
|
|
};
|
|
|
|
const languages = [
|
|
{ id: 1, language: "Русский", pathname: "ru" as const },
|
|
{ id: 2, language: "Кыргызча", pathname: "kg" as const },
|
|
{ id: 3, language: "English", pathname: "en" as const },
|
|
];
|
|
|
|
return (
|
|
<nav className="p-[48px] w-full h-full min-h-[600px] fixed left-0 top-[120px] flex flex-col gap-6 bg-white scroll inset-y-0 right-0 z-50 overflow-y-auto">
|
|
{/* <div className="flex items-center justify-between">
|
|
<Link className="-m-1.5 p-1.5" href={"/"}>
|
|
<Image src={logo} alt="Logo" className="h-8 w-auto" />
|
|
</Link>
|
|
<button
|
|
onClick={() => setOpenMenu(false)}
|
|
className="-m-2.5 rounded-md p-2.5 text-gray-700"
|
|
>
|
|
<Image src={cross} alt="cross" />
|
|
</button>
|
|
</div> */}
|
|
{LINKS().map((link) => (
|
|
<Link
|
|
onClick={() => setOpenMenu(false)}
|
|
className={`justify-start font-medium size-6${
|
|
pathname === link.pathname ? "text-light-blue" : ""
|
|
}`}
|
|
href={`${pathname.slice(1, 3)}/${link.pathname}`}
|
|
key={link.id}
|
|
>
|
|
{link.pagename}
|
|
</Link>
|
|
))}
|
|
|
|
<NavAuth setOpenMenu={setOpenMenu} responsible />
|
|
|
|
<div>
|
|
<button
|
|
onClick={() => setOpenMenuLanguage((prev) => !prev)}
|
|
className="mb-5 flex items-center gap-1 text-[#66727f]"
|
|
>
|
|
{langKeys[currentLanguage as string]}
|
|
<Image
|
|
className="w-[18px] h-[18px]"
|
|
src={chevron_down}
|
|
alt="Chevron Down"
|
|
/>
|
|
</button>
|
|
|
|
{openMenuLanguage && (
|
|
<div className="flex flex-col gap-[10px]">
|
|
{languages.map((lang) => (
|
|
<Link
|
|
onClick={() => setCurrentLanguage(lang.pathname)}
|
|
className={`${
|
|
currentLanguage === lang.pathname
|
|
? "text-black font-bold"
|
|
: "text-[#66727f]"
|
|
}`}
|
|
href="#"
|
|
locale={lang.pathname}
|
|
key={lang.id}
|
|
>
|
|
{lang.language}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
export default NavMenu;
|