blog mobileMenu updated and internationalization added
This commit is contained in:
parsa aghaei
parent
dd80343485
commit
6ad3a48adb
@ -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"}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user