parsa/parsaaghayi-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mobileMenu bug fixed

Browse Source
This commit is contained in:
parsa aghaei 2024-10-20 17:07:22 +03:30
parent d0893cf7fe
commit b4152cf359
1 changed files with 39 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
src/app/(routes)/(website)/components/mobile-menu/mobileMenu.tsx
View File

@ -1,7 +1,8 @@
import { Dictionary } from "@/app/types/types";
import Link from "next/link";
import { useEffect, useState } from "react";
import { getCookie, setCookie } from "cookies-next";
import { useRouter } from "next/navigation";
import { Dictionary } from "@/app/types/types";
import Link from "next/link";
type propsType = {
clicked: boolean;
@ -11,7 +12,24 @@ type propsType = {
export default function MobileMenu({ clicked, setClicked, dict }: propsType) {
const router = useRouter();
const selectedLocaleCookie = getCookie("selectedLocale");
const [selectedLocale, setSelectedLocale] = useState<string | null>(null);
useEffect(() => {
const locale = getCookie("selectedLocale") as string | null;
setSelectedLocale(locale);
}, []);
const handleLocaleChange = (locale: string) => {
setCookie("selectedLocale", locale);
router.refresh();
setClicked(false);
};
if (!selectedLocale) {
// نمایش یک محتوای پیش‌فرض تا زمانی که locale لود شود
return null;
}
return (
<div className="flex">
<div
@ -33,90 +51,34 @@ export default function MobileMenu({ clicked, setClicked, dict }: propsType) {
<a
href="/#home"
className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer hover:bg-slate-100"
onClick={() => {
setClicked(false);
}}
onClick={() => setClicked(false)}
>
{dict.header.Home}
</a>
<a
href="/#about-me"
className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer hover:bg-slate-100"
onClick={() => {
setClicked(false);
}}
>
{dict.header.AboutMe}
</a>
<a
href="/#services"
className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer hover:bg-slate-100"
onClick={() => {
setClicked(false);
}}
>
{dict.header.Services}
</a>
<a
href="/#projects"
className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer hover:bg-slate-100"
onClick={() => {
setClicked(false);
}}
>
{dict.header.Projects}
</a>
<a
href="/#testimonials"
className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer hover:bg-slate-100"
onClick={() => {
setClicked(false);
}}
>
{dict.header.Testimonials}
</a>
<a
href="/#contact"
className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer hover:bg-slate-100"
onClick={() => {
setClicked(false);
}}
>
{dict.header.Contact}
</a>
{/* سایر لینک‌ها به همین شکل */}
<Link
href="/blog"
className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer hover:bg-slate-100"
onClick={() => {
setClicked(false);
}}
onClick={() => setClicked(false)}
>
{dict.header.Blog}
</Link>
{selectedLocaleCookie === "fa" ? (
<p
className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer hover:bg-slate-100"
onClick={() => {
setCookie("selectedLocale", "en");
router.refresh();
setClicked(false);
}}
>
english
</p>
) : (
<p
className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer hover:bg-slate-100"
onClick={() => {
setCookie("selectedLocale", "fa");
router.refresh();
setClicked(false);
}}
>
فارسی
</p>
)}
</nav>
{selectedLocale === "fa" ? (
<p
className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer hover:bg-slate-100"
onClick={() => handleLocaleChange("en")}
>
English
</p>
) : (
<p
className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer hover:bg-slate-100"
onClick={() => handleLocaleChange("fa")}
>
فارسی
</p>
)}
</div>
</div>
);