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

language added to mobileMenu

Browse Source
This commit is contained in:
parsa aghaei 2024-10-20 15:15:30 +03:30
parent e1f6eabcc9
commit 22be1be11c
5 changed files with 64 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/(routes)/(website)/components/burger-button/burgerButton.tsx
View File

@ -2,13 +2,19 @@
import Image from "next/image"; import Image from "next/image";
import React, { useState } from "react"; import React, { useState } from "react";
import MobileMenu from "../mobile-menu/mobileMenu"; 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); const [clicked, setClicked] = useState(false);
return ( return (
<> <>
<button <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)} onClick={() => setClicked(!clicked)}
> >
<Image <Image
@ -20,7 +26,7 @@ export default function BurgerButton() {
onClick={() => setClicked(!clicked)} onClick={() => setClicked(!clicked)}
/> />
</button> </button>
<MobileMenu clicked={clicked} setClicked={setClicked} /> <MobileMenu clicked={clicked} setClicked={setClicked} dict={dict} />
</> </>
); );
} }

24
src/app/(routes)/(website)/components/header/header.tsx
View File

@ -5,61 +5,63 @@ import SelectLanguage from "../selectLanguage/selectLanguage";
import { cookies } from "next/headers"; import { cookies } from "next/headers";
import { getDictionary } from "@/app/lib/functions/dictionaries"; import { getDictionary } from "@/app/lib/functions/dictionaries";
import { getDefaultLocale } from "@/app/lib/functions/utils"; import { getDefaultLocale } from "@/app/lib/functions/utils";
import { RequestCookie } from "next/dist/compiled/@edge-runtime/cookies";
export default async function Header() { export default async function Header() {
const dict = await getDictionary(getDefaultLocale()); const dict = await getDictionary(getDefaultLocale());
const siteCookies: RequestCookie[] = cookies().getAll();
return ( return (
<div <div
className="fixed z-40 flex h-[67px] w-full items-center justify-between bg-[#fff] px-2 py-[50px] xl:px-10" className="fixed z-40 flex h-[67px] w-full items-center justify-between bg-[#fff] px-2 py-[50px] xl:px-10"
id="header" id="header"
> >
<div className="flex flex-wrap items-center justify-center xl:flex-nowrap xl:justify-normal"> <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" /> <img src={"/images/logo.svg"} className="w-full" alt="logo" />
</div> </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} {dict.header.Name}
</p> </p>
</div> </div>
<ul className="hidden items-center justify-center rounded p-2 lg:flex"> <ul className="hidden items-center justify-center rounded p-2 lg:flex">
<a <a
href="/#home" 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} {dict.header.Home}
</a> </a>
<a <a
href="/#about-me" 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} {dict.header.AboutMe}
</a> </a>
<a <a
href="/#services" 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} {dict.header.Services}
</a> </a>
<a <a
href="/#projects" 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} {dict.header.Projects}
</a> </a>
<a <a
href="/#testimonials" 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} {dict.header.Testimonials}
</a> </a>
<a <a
href="/#contact" 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} {dict.header.Contact}
</a> </a>
<Link <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"} href={"/blog"}
> >
{dict.header.Blog} {dict.header.Blog}
@ -70,10 +72,10 @@ export default async function Header() {
/> />
</ul> </ul>
<div className="flex gap-1"> <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} {dict.header.Button}
</button> </button>
<BurgerButton /> <BurgerButton dict={dict} />
</div> </div>
</div> </div>
); );

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

@ -1,10 +1,17 @@
import { Dictionary } from "@/app/types/types";
import Link from "next/link"; import Link from "next/link";
import { getCookie, setCookie } from "cookies-next";
import { useRouter } from "next/navigation";
type propsType = { type propsType = {
clicked: boolean; clicked: boolean;
setClicked: React.Dispatch<React.SetStateAction<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 ( return (
<div className="flex"> <div className="flex">
<div <div
@ -19,7 +26,7 @@ export default function MobileMenu({ clicked, setClicked }: propsType) {
<img src={"/images/logo.svg"} className="w-full" alt="logo" /> <img src={"/images/logo.svg"} className="w-full" alt="logo" />
</div> </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 text-[20px] font-[900] capitalize text-[#FD6F00] sm:text-[23px] xl:ms-3 xl:text-[30px]">
parsa aghayi {dict.header.Name}
</p> </p>
</div> </div>
<nav className="flex w-full flex-col"> <nav className="flex w-full flex-col">
@ -30,7 +37,7 @@ export default function MobileMenu({ clicked, setClicked }: propsType) {
setClicked(false); setClicked(false);
}} }}
> >
Home {dict.header.Home}
</a> </a>
<a <a
href="/#about-me" href="/#about-me"
@ -39,7 +46,7 @@ export default function MobileMenu({ clicked, setClicked }: propsType) {
setClicked(false); setClicked(false);
}} }}
> >
About Me {dict.header.AboutMe}
</a> </a>
<a <a
href="/#services" href="/#services"
@ -48,7 +55,7 @@ export default function MobileMenu({ clicked, setClicked }: propsType) {
setClicked(false); setClicked(false);
}} }}
> >
Services {dict.header.Services}
</a> </a>
<a <a
href="/#projects" href="/#projects"
@ -57,7 +64,7 @@ export default function MobileMenu({ clicked, setClicked }: propsType) {
setClicked(false); setClicked(false);
}} }}
> >
Projects {dict.header.Projects}
</a> </a>
<a <a
href="/#testimonials" href="/#testimonials"
@ -66,7 +73,7 @@ export default function MobileMenu({ clicked, setClicked }: propsType) {
setClicked(false); setClicked(false);
}} }}
> >
Testimonials {dict.header.Testimonials}
</a> </a>
<a <a
href="/#contact" href="/#contact"
@ -75,7 +82,7 @@ export default function MobileMenu({ clicked, setClicked }: propsType) {
setClicked(false); setClicked(false);
}} }}
> >
Contact {dict.header.Contact}
</a> </a>
<Link <Link
@ -85,8 +92,31 @@ export default function MobileMenu({ clicked, setClicked }: propsType) {
setClicked(false); setClicked(false);
}} }}
> >
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>
) : 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> </nav>
</div> </div>
</div> </div>

4
src/app/(routes)/(website)/components/selectLanguage/selectLanguage.tsx
View File

@ -22,14 +22,14 @@ export default function SelectLanguage({
{selectedLocale ? ( {selectedLocale ? (
<p <p
onClick={() => setisOpen(!isOpen)} 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} {selectedLocale?.value}
</p> </p>
) : ( ) : (
<p <p
onClick={() => setisOpen(!isOpen)} 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} {defaultLocale?.value}
</p> </p>

2
src/app/lib/functions/dictionaries.ts
View File

@ -14,4 +14,4 @@ export const getDictionary = async (
return loadDictionary(); return loadDictionary();
} }
throw new Error(`No dictionary found for locale: ${locale}`); throw new Error(`No dictionary found for locale: ${locale}`);
}; };