language added to mobileMenu

2024-10-20 15:15:30 +03:30 · 2024-10-20 15:15:30 +03:30 · 22be1be11c
commit 22be1be11c
parent e1f6eabcc9
5 changed files with 64 additions and 26 deletions
--- a/src/app/(routes)/(website)/components/burger-button/burgerButton.tsx
+++ b/src/app/(routes)/(website)/components/burger-button/burgerButton.tsx
@ -2,13 +2,19 @@
 import Image from "next/image";
 import React, { useState } from "react";
 import MobileMenu from "../mobile-menu/mobileMenu";
+import { Dictionary } from "@/app/types/types";

-export default function BurgerButton() {
+interface BurgerButtonProps {
+  dict: Dictionary;
+}
+
+export default function BurgerButton({ dict }: BurgerButtonProps) {
  const [clicked, setClicked] = useState(false);
+
  return (
    <>
      <button
-        className="flex items-center justify-center whitespace-nowrap rounded-md bg-[#FD6F00] px-4 py-2 text-[16px] font-[600] text-[#fff] lg:hidden xl:text-[20px] select-none"
+        className="flex select-none items-center justify-center whitespace-nowrap rounded-md bg-[#FD6F00] px-4 py-2 text-[16px] font-[600] text-[#fff] lg:hidden xl:text-[20px]"
        onClick={() => setClicked(!clicked)}
      >
        <Image
@ -20,7 +26,7 @@ export default function BurgerButton() {
          onClick={() => setClicked(!clicked)}
        />
      </button>
-      <MobileMenu clicked={clicked} setClicked={setClicked} />
+      <MobileMenu clicked={clicked} setClicked={setClicked} dict={dict} />
    </>
  );
 }
--- a/src/app/(routes)/(website)/components/header/header.tsx
+++ b/src/app/(routes)/(website)/components/header/header.tsx
@ -5,61 +5,63 @@ import SelectLanguage from "../selectLanguage/selectLanguage";
 import { cookies } from "next/headers";
 import { getDictionary } from "@/app/lib/functions/dictionaries";
 import { getDefaultLocale } from "@/app/lib/functions/utils";
+import { RequestCookie } from "next/dist/compiled/@edge-runtime/cookies";

 export default async function Header() {
  const dict = await getDictionary(getDefaultLocale());
+  const siteCookies: RequestCookie[] = cookies().getAll();
  return (
    <div
      className="fixed z-40 flex h-[67px] w-full items-center justify-between bg-[#fff] px-2 py-[50px] xl:px-10"
      id="header"
    >
      <div className="flex flex-wrap items-center justify-center xl:flex-nowrap xl:justify-normal">
-        <div className="flex w-[50px]">
+        <div className="flex w-[40px] sm:w-[50px]">
          <img src={"/images/logo.svg"} className="w-full" alt="logo" />
        </div>
-        <p className="ms-2 text-[20px] font-[900] capitalize text-[#FD6F00] sm:text-[23px] xl:ms-3 xl:text-[30px]">
+        <p className="ms-2 font-[900] capitalize text-[#FD6F00] text-[px] sm:text-[23px] xl:ms-3 xl:text-[30px]">
          {dict.header.Name}
        </p>
      </div>
      <ul className="hidden items-center justify-center rounded p-2 lg:flex">
        <a
          href="/#home"
-          className="mx-2 whitespace-nowrap rounded-lg px-2 py-[10px] text-[18px] font-[600] hover:text-[#FD6F00] capitalize"
+          className="mx-2 whitespace-nowrap rounded-lg px-1 py-[10px] text-[15px] font-[600] capitalize hover:text-[#FD6F00] xl:text-[20px]"
        >
          {dict.header.Home}
        </a>
        <a
          href="/#about-me"
-          className="mx-2 whitespace-nowrap rounded-lg px-2 py-[10px] text-[18px] font-[600] hover:text-[#FD6F00] capitalize"
+          className="mx-2 whitespace-nowrap rounded-lg px-1 py-[10px] text-[15px] font-[600] capitalize hover:text-[#FD6F00] xl:text-[20px]"
        >
          {dict.header.AboutMe}
        </a>
        <a
          href="/#services"
-          className="mx-2 whitespace-nowrap rounded-lg px-2 py-[10px] text-[18px] font-[600] hover:text-[#FD6F00] capitalize"
+          className="mx-2 whitespace-nowrap rounded-lg px-1 py-[10px] text-[15px] font-[600] capitalize hover:text-[#FD6F00] xl:text-[20px]"
        >
          {dict.header.Services}
        </a>
        <a
          href="/#projects"
-          className="mx-2 whitespace-nowrap rounded-lg px-2 py-[10px] text-[18px] font-[600] hover:text-[#FD6F00] capitalize"
+          className="mx-2 whitespace-nowrap rounded-lg px-1 py-[10px] text-[15px] font-[600] capitalize hover:text-[#FD6F00] xl:text-[20px]"
        >
          {dict.header.Projects}
        </a>
        <a
          href="/#testimonials"
-          className="mx-2 whitespace-nowrap rounded-lg px-2 py-[10px] text-[18px] font-[600] hover:text-[#FD6F00] capitalize"
+          className="mx-2 whitespace-nowrap rounded-lg px-1 py-[10px] text-[15px] font-[600] capitalize hover:text-[#FD6F00] xl:text-[20px]"
        >
          {dict.header.Testimonials}
        </a>
        <a
          href="/#contact"
-          className="mx-2 whitespace-nowrap rounded-lg px-2 py-[10px] text-[18px] font-[600] hover:text-[#FD6F00] capitalize"
+          className="mx-2 whitespace-nowrap rounded-lg px-1 py-[10px] text-[15px] font-[600] capitalize hover:text-[#FD6F00] xl:text-[20px]"
        >
          {dict.header.Contact}
        </a>
        <Link
-          className="mx-2 whitespace-nowrap rounded-lg px-2 py-[10px] text-[18px] font-[600] hover:text-[#FD6F00] capitalize"
+          className="mx-2 whitespace-nowrap rounded-lg px-1 py-[10px] text-[15px] font-[600] capitalize hover:text-[#FD6F00] xl:text-[20px]"
          href={"/blog"}
        >
          {dict.header.Blog}
@ -70,10 +72,10 @@ export default async function Header() {
        />
      </ul>
      <div className="flex gap-1">
-        <button className="flex items-center justify-center whitespace-nowrap rounded-md bg-[#FD6F00] px-4 py-2 text-[16px] min-w-[100px] font-[600] text-[#fff] xl:text-[20px]">
+        <button className="flex items-center justify-center whitespace-nowrap rounded-md bg-[#FD6F00] px-4 py-2 text-[15px] font-[600] text-[#fff] xl:text-[20px]">
          {dict.header.Button}
        </button>
-        <BurgerButton />
+        <BurgerButton dict={dict} />
      </div>
    </div>
  );
--- a/src/app/(routes)/(website)/components/mobile-menu/mobileMenu.tsx
+++ b/src/app/(routes)/(website)/components/mobile-menu/mobileMenu.tsx
@ -1,10 +1,17 @@
+import { Dictionary } from "@/app/types/types";
 import Link from "next/link";
+import { getCookie, setCookie } from "cookies-next";
+import { useRouter } from "next/navigation";

 type propsType = {
  clicked: boolean;
  setClicked: React.Dispatch<React.SetStateAction<boolean>>;
+  dict: Dictionary;
 };
-export default function MobileMenu({ clicked, setClicked }: propsType) {
+
+export default function MobileMenu({ clicked, setClicked, dict }: propsType) {
+  const router = useRouter();
+  const selectedLocaleCookie = getCookie("selectedLocale");
  return (
    <div className="flex">
      <div
@ -19,7 +26,7 @@ export default function MobileMenu({ clicked, setClicked }: propsType) {
            <img src={"/images/logo.svg"} className="w-full" alt="logo" />
          </div>
          <p className="ms-2 text-[20px] font-[900] capitalize text-[#FD6F00] sm:text-[23px] xl:ms-3 xl:text-[30px]">
-            parsa aghayi
+            {dict.header.Name}
          </p>
        </div>
        <nav className="flex w-full flex-col">
@ -30,7 +37,7 @@ export default function MobileMenu({ clicked, setClicked }: propsType) {
              setClicked(false);
            }}
          >
-            Home
+            {dict.header.Home}
          </a>
          <a
            href="/#about-me"
@ -39,7 +46,7 @@ export default function MobileMenu({ clicked, setClicked }: propsType) {
              setClicked(false);
            }}
          >
-            About Me
+            {dict.header.AboutMe}
          </a>
          <a
            href="/#services"
@ -48,7 +55,7 @@ export default function MobileMenu({ clicked, setClicked }: propsType) {
              setClicked(false);
            }}
          >
-            Services
+            {dict.header.Services}
          </a>
          <a
            href="/#projects"
@ -57,7 +64,7 @@ export default function MobileMenu({ clicked, setClicked }: propsType) {
              setClicked(false);
            }}
          >
-            Projects
+            {dict.header.Projects}
          </a>
          <a
            href="/#testimonials"
@ -66,7 +73,7 @@ export default function MobileMenu({ clicked, setClicked }: propsType) {
              setClicked(false);
            }}
          >
-            Testimonials
+            {dict.header.Testimonials}
          </a>
          <a
            href="/#contact"
@ -75,7 +82,7 @@ export default function MobileMenu({ clicked, setClicked }: propsType) {
              setClicked(false);
            }}
          >
-            Contact
+            {dict.header.Contact}
          </a>

          <Link
@ -85,8 +92,31 @@ export default function MobileMenu({ clicked, setClicked }: propsType) {
              setClicked(false);
            }}
          >
-            Blog
+            {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>
+          ) : selectedLocaleCookie === "en" ? (
+            <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>
+          ) : null}
        </nav>
      </div>
    </div>
--- a/src/app/(routes)/(website)/components/selectLanguage/selectLanguage.tsx
+++ b/src/app/(routes)/(website)/components/selectLanguage/selectLanguage.tsx
@ -22,14 +22,14 @@ export default function SelectLanguage({
      {selectedLocale ? (
        <p
          onClick={() => setisOpen(!isOpen)}
-          className="mx-2 mb-[5px] cursor-pointer select-none whitespace-nowrap border-b-2 border-[#FD6F00] px-2 py-[10px] pb-[5px] text-[18px] font-[600] text-[#FD6F00] hover:text-[#FD6F00]"
+          className="mx-2 mb-[5px] cursor-pointer select-none whitespace-nowrap border-b-2 border-[#FD6F00] px-2 py-[10px] pb-[5px] text-[15px] font-[600] text-[#FD6F00] hover:text-[#FD6F00]"
        >
          {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-[18px] font-[600] hover:text-[#FD6F00]"
+          className="mx-2 mb-[5px] cursor-pointer select-none whitespace-nowrap px-2 py-[10px] pb-[5px] text-[15px] font-[600] hover:text-[#FD6F00]"
        >
          {defaultLocale?.value}
        </p>
--- a/src/app/lib/functions/dictionaries.ts
+++ b/src/app/lib/functions/dictionaries.ts
@ -14,4 +14,4 @@ export const getDictionary = async (
    return loadDictionary();
  }
  throw new Error(`No dictionary found for locale: ${locale}`);
-};
+};