mobileMenu bug fixed

This commit is contained in:
parsa aghaei 2024-10-20 17:07:22 +03:30
parent d0893cf7fe
commit b4152cf359

View File

@ -1,7 +1,8 @@
import { Dictionary } from "@/app/types/types"; import { useEffect, useState } from "react";
import Link from "next/link";
import { getCookie, setCookie } from "cookies-next"; import { getCookie, setCookie } from "cookies-next";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { Dictionary } from "@/app/types/types";
import Link from "next/link";
type propsType = { type propsType = {
clicked: boolean; clicked: boolean;
@ -11,7 +12,24 @@ type propsType = {
export default function MobileMenu({ clicked, setClicked, dict }: propsType) { export default function MobileMenu({ clicked, setClicked, dict }: propsType) {
const router = useRouter(); 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 ( return (
<div className="flex"> <div className="flex">
<div <div
@ -33,90 +51,34 @@ export default function MobileMenu({ clicked, setClicked, dict }: propsType) {
<a <a
href="/#home" href="/#home"
className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer hover:bg-slate-100" className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer hover:bg-slate-100"
onClick={() => { onClick={() => setClicked(false)}
setClicked(false);
}}
> >
{dict.header.Home} {dict.header.Home}
</a> </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 <Link
href="/blog" href="/blog"
className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer hover:bg-slate-100" className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer hover:bg-slate-100"
onClick={() => { onClick={() => setClicked(false)}
setClicked(false);
}}
> >
{dict.header.Blog} {dict.header.Blog}
</Link> </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> </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>
</div> </div>
); );