blog mobileMenu updated

This commit is contained in:
parsa aghaei 2024-10-02 17:01:33 +03:30
parent 7e243fdd4d
commit 67d818ba88

View File

@ -1,11 +1,13 @@
import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
type propsType = {
clicked: boolean;
setClicked: React.Dispatch<React.SetStateAction<boolean>>;
};
export default function MobileMenu({ clicked, setClicked }: propsType) {
const pathname = usePathname();
return (
<div className="flex">
<div
@ -26,8 +28,8 @@ export default function MobileMenu({ clicked, setClicked }: propsType) {
</div>
<nav className="flex w-full flex-col">
<Link
href="/#home"
className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] text-white hover:cursor-pointer"
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);
}}
@ -35,8 +37,8 @@ export default function MobileMenu({ clicked, setClicked }: propsType) {
Home
</Link>
<Link
href="/#about-me"
className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] text-white hover:cursor-pointer"
href="/blog/new"
className={`block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer ${pathname === "/blog/new" ? "text-blog-text-hover" : "text-white"}`}
onClick={() => {
setClicked(false);
}}
@ -44,8 +46,8 @@ export default function MobileMenu({ clicked, setClicked }: propsType) {
New
</Link>
<Link
href="/#services"
className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] text-white hover:cursor-pointer"
href="/blog/popular"
className={`block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer ${pathname === "/blog/popular" ? "text-blog-text-hover" : "text-white"}`}
onClick={() => {
setClicked(false);
}}
@ -53,8 +55,8 @@ export default function MobileMenu({ clicked, setClicked }: propsType) {
Popular
</Link>
<Link
href="/#projects"
className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] text-white hover:cursor-pointer"
href="/blog/reading-list"
className={`block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer ${pathname === "/blog/reading-list" ? "text-blog-text-hover" : "text-white"}`}
onClick={() => {
setClicked(false);
}}
@ -62,8 +64,8 @@ export default function MobileMenu({ clicked, setClicked }: propsType) {
Reading list
</Link>
<Link
href="/#testimonials"
className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] text-white hover:cursor-pointer"
href="/blog/topics"
className={`block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer ${pathname === "/blog/topics" ? "text-blog-text-hover" : "text-white"}`}
onClick={() => {
setClicked(false);
}}