From 6ad3a48adb660aca0b0fe1a1b23aaf3841cc500b Mon Sep 17 00:00:00 2001
From: parsa aghaei <p.aghaei@hoshmand.local>
Date: Mon, 21 Oct 2024 10:31:03 +0330
Subject: [PATCH] blog mobileMenu updated and internationalization added

---
 .../blog/components/header/header.tsx         |  11 +-
 .../components/mobile-menu/mobileMenu.tsx     | 110 +++++++++++-------
 .../selectLanguage/selectLanguage.tsx         |  64 ++++++++++
 3 files changed, 145 insertions(+), 40 deletions(-)
 create mode 100644 src/app/(routes)/blog/components/selectLanguage/selectLanguage.tsx

diff --git a/src/app/(routes)/blog/components/header/header.tsx b/src/app/(routes)/blog/components/header/header.tsx
index fff0a21..8805e37 100644
--- a/src/app/(routes)/blog/components/header/header.tsx
+++ b/src/app/(routes)/blog/components/header/header.tsx
@@ -4,6 +4,8 @@ import Button from "../button/button";
 import { NavLinks } from "./navLinks";
 import Link from "next/link";
 import BurgerButton from "../burger-button/burgerButton";
+import { cookies } from "next/headers";
+import SelectLanguage from "../selectLanguage/selectLanguage";
 
 export default function Header() {
   return (
@@ -19,7 +21,14 @@ export default function Header() {
             />
           </div>
         </Link>
-        <NavLinks className="hidden md:flex" />
+        <div className="flex items-center">
+          <NavLinks className="hidden md:flex" />
+          <SelectLanguage
+            className="hidden md:flex"
+            selectedLocale={cookies().get("selectedLocale")}
+            defaultLocale={cookies().get("defaultLocale")}
+          />
+        </div>
         <div className="flex items-center justify-center gap-1 sm:gap-5">
           <Image
             src={"/images/blog/icons/search.svg"}
diff --git a/src/app/(routes)/blog/components/mobile-menu/mobileMenu.tsx b/src/app/(routes)/blog/components/mobile-menu/mobileMenu.tsx
index 3902463..49db0b5 100644
--- a/src/app/(routes)/blog/components/mobile-menu/mobileMenu.tsx
+++ b/src/app/(routes)/blog/components/mobile-menu/mobileMenu.tsx
@@ -1,6 +1,8 @@
+import { getCookie, setCookie } from "cookies-next";
 import Image from "next/image";
 import Link from "next/link";
-import { usePathname } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
 
 type propsType = {
   clicked: boolean;
@@ -8,6 +10,19 @@ type propsType = {
 };
 export default function MobileMenu({ clicked, setClicked }: propsType) {
   const pathname = usePathname();
+  const router = useRouter();
+  const [selectedLocale, setSelectedLocale] = useState<string | null>("en");
+  useEffect(() => {
+    const locale = getCookie("selectedLocale") as string | null;
+    setSelectedLocale(locale);
+  }, [clicked]);
+
+  const handleLocaleChange = (locale: string) => {
+    setCookie("selectedLocale", locale);
+    router.refresh();
+    setClicked(false);
+  };
+
   return (
     <div className="flex">
       <div
@@ -26,44 +41,61 @@ export default function MobileMenu({ clicked, setClicked }: propsType) {
             />
           </div>
         </div>
-        <nav className="flex w-full flex-col">
-          <Link
-            href="/blog"
-            className={`block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer ${pathname === "/blog" ? "text-blog-text-hover" : "text-white"}`}
-            onClick={() => {
-              setClicked(false);
-            }}
-          >
-            Home
-          </Link>
-          <Link
-            href="/blog/filtered-posts/new"
-            className={`block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer ${pathname === "/blog/filtered-posts/new" ? "text-blog-text-hover" : "text-white"}`}
-            onClick={() => {
-              setClicked(false);
-            }}
-          >
-            New
-          </Link>
-          <Link
-            href="/blog/filtered-posts/popular"
-            className={`block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer ${pathname === "/blog/filtered-posts/popular" ? "text-blog-text-hover" : "text-white"}`}
-            onClick={() => {
-              setClicked(false);
-            }}
-          >
-            Popular
-          </Link>
-          <Link
-            href="/blog/categories"
-            className={`block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer ${pathname === "/blog/categories" ? "text-blog-text-hover" : "text-white"}`}
-            onClick={() => {
-              setClicked(false);
-            }}
-          >
-            Categories
-          </Link>
-        </nav>
+        <div className="flex flex-col">
+          <nav className="flex w-full flex-col">
+            <Link
+              href="/blog"
+              className={`block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer ${pathname === "/blog" ? "text-blog-text-hover" : "text-white"}`}
+              onClick={() => {
+                setClicked(false);
+              }}
+            >
+              Home
+            </Link>
+            <Link
+              href="/blog/filtered-posts/new"
+              className={`block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer ${pathname === "/blog/filtered-posts/new" ? "text-blog-text-hover" : "text-white"}`}
+              onClick={() => {
+                setClicked(false);
+              }}
+            >
+              New
+            </Link>
+            <Link
+              href="/blog/filtered-posts/popular"
+              className={`block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer ${pathname === "/blog/filtered-posts/popular" ? "text-blog-text-hover" : "text-white"}`}
+              onClick={() => {
+                setClicked(false);
+              }}
+            >
+              Popular
+            </Link>
+            <Link
+              href="/blog/categories"
+              className={`block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer ${pathname === "/blog/categories" ? "text-blog-text-hover" : "text-white"}`}
+              onClick={() => {
+                setClicked(false);
+              }}
+            >
+              Categories
+            </Link>
+          </nav>
+          {selectedLocale === "fa" ? (
+            <p
+              className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] text-white hover:cursor-pointer"
+              onClick={() => handleLocaleChange("en")}
+            >
+              English
+            </p>
+          ) : (
+            <p
+              className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] text-white hover:cursor-pointer"
+              onClick={() => handleLocaleChange("fa")}
+            >
+              فارسی
+            </p>
+          )}
+        </div>
       </div>
     </div>
   );
diff --git a/src/app/(routes)/blog/components/selectLanguage/selectLanguage.tsx b/src/app/(routes)/blog/components/selectLanguage/selectLanguage.tsx
new file mode 100644
index 0000000..21a024b
--- /dev/null
+++ b/src/app/(routes)/blog/components/selectLanguage/selectLanguage.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import { setCookie } from "cookies-next";
+import { LocaleCookieType } from "@/app/types/types";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+interface SelectLanguageProps {
+  selectedLocale: LocaleCookieType | undefined;
+  defaultLocale: LocaleCookieType | undefined;
+  className: string;
+}
+
+export default function SelectLanguage({
+  selectedLocale,
+  defaultLocale,
+  className,
+}: SelectLanguageProps) {
+  const router = useRouter();
+  const [isOpen, setisOpen] = useState(false);
+
+  return (
+    <div className={`relative flex min-w-[100px] justify-center ${className}`}>
+      {selectedLocale ? (
+        <p
+          onClick={() => setisOpen(!isOpen)}
+          className="mx-2 mb-[5px] cursor-pointer select-none whitespace-nowrap border-b-2 border-blog-red px-2 py-[10px] pb-[5px] text-[16px] font-[600] text-blog-text-hover"
+        >
+          {selectedLocale?.value}
+        </p>
+      ) : (
+        <p
+          onClick={() => setisOpen(!isOpen)}
+          className="mx-2 mb-[5px] cursor-pointer select-none whitespace-nowrap px-2 py-[10px] pb-[5px] text-[16px] font-[600] hover:text-blog-red"
+        >
+          {defaultLocale?.value}
+        </p>
+      )}
+
+      <ul
+        className={`absolute start-0 z-20 flex w-full flex-col items-center gap-2 rounded-lg border bg-white py-3 transition-all ${isOpen ? "top-[50px] scale-100" : "top-0 scale-0"}`}
+      >
+        <li
+          className="w-[70%] border-b-2 border-[rgba(0,0,0,0)] pb-1 text-center hover:cursor-pointer hover:border-blog-red"
+          onClick={() => {
+            setCookie("selectedLocale", "fa"), router.refresh();
+            setisOpen(false);
+          }}
+        >
+          فارسی
+        </li>
+        <li
+          className="w-[70%] border-b-2 border-[rgba(0,0,0,0)] pb-1 text-center hover:cursor-pointer hover:border-blog-red"
+          onClick={() => {
+            setCookie("selectedLocale", "en"), router.refresh();
+            setisOpen(false);
+          }}
+        >
+          English
+        </li>
+      </ul>
+    </div>
+  );
+}