From 6d2518b4ce52b2685354c871d0f715a5bda575d2 Mon Sep 17 00:00:00 2001
From: parsa aghaei <p.aghaei@hoshmand.local>
Date: Tue, 24 Sep 2024 18:07:13 +0330
Subject: [PATCH] mobileMenu updated

---
 src/app/_components/mobile-menu/page.tsx | 136 ++++++++++++-----------
 src/app/_components/services/page.tsx    |   2 +-
 2 files changed, 72 insertions(+), 66 deletions(-)

diff --git a/src/app/_components/mobile-menu/page.tsx b/src/app/_components/mobile-menu/page.tsx
index 4eac164..dee30d7 100644
--- a/src/app/_components/mobile-menu/page.tsx
+++ b/src/app/_components/mobile-menu/page.tsx
@@ -4,73 +4,79 @@ type propsType = {
 };
 export default function MobileMenu({ clicked, setClicked }: propsType) {
   return (
-    <div
-      className={`fixed left-0 top-0 z-40 flex h-full w-[250px] flex-col items-start gap-10 bg-[#fd6f00] ${clicked ? "left-0" : "left-[-260px]"} lg:left-[-260px] mobile-menu`}
-    >
-      <div className="z-50 flex w-full flex-wrap items-center justify-start bg-white px-3 py-6">
-        <div className="flex w-[50px]">
-          <img src={"/images/logo.svg"} className="w-full" alt="logo" />
+    <div className="flex">
+      <div
+        className={`fixed right-0 ${clicked ? "right-0" : "right-[-1000px]"} top-[98px] z-30 flex h-full w-full bg-slate-950 opacity-20`}
+        onClick={() => setClicked(false)}
+      ></div>
+      <div
+        className={`fixed left-0 top-0 z-40 flex h-full w-[250px] flex-col items-start gap-10 bg-[#fd6f00] ${clicked ? "left-0" : "left-[-260px]"} mobile-menu lg:left-[-260px]`}
+      >
+        <div className="z-50 flex w-full flex-wrap items-center justify-start bg-white px-3 py-6">
+          <div className="flex w-[50px]">
+            <img src={"/images/logo.svg"} className="w-full" alt="logo" />
+          </div>
+          <p className="ms-2 text-[20px] font-[900] text-[#FD6F00] sm:text-[23px] xl:ms-3 xl:text-[30px]">
+            Parsa Aghayi
+          </p>
         </div>
-        <p className="ms-2 text-[20px] font-[900] text-[#FD6F00] sm:text-[23px] xl:ms-3 xl:text-[30px]">
-          Parsa Aghayi
-        </p>
+        <ul className="flex w-full flex-col">
+          <a
+            href="/#home"
+            className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer hover:bg-slate-100"
+            onClick={(e) => {
+              setClicked(false);
+            }}
+          >
+            Home
+          </a>
+          <a
+            href="/#about-me"
+            className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer hover:bg-slate-100"
+            onClick={(e) => {
+              setClicked(false);
+            }}
+          >
+            About Me
+          </a>
+          <a
+            href="/#services"
+            className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer hover:bg-slate-100"
+            onClick={(e) => {
+              setClicked(false);
+            }}
+          >
+            Services
+          </a>
+          <a
+            href="/#projects"
+            className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer hover:bg-slate-100"
+            onClick={(e) => {
+              setClicked(false);
+            }}
+          >
+            Projects
+          </a>
+          <a
+            href="/#testimonials"
+            className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer hover:bg-slate-100"
+            onClick={(e) => {
+              setClicked(false);
+            }}
+          >
+            Testimonials
+          </a>
+          <a
+            href="/#contact"
+            className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer hover:bg-slate-100"
+            onClick={(e) => {
+              setClicked(false);
+            }}
+          >
+            Contact
+          </a>
+        </ul>
       </div>
-      <ul className="flex w-full flex-col">
-        <a
-          href="/#home"
-          className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer hover:bg-slate-100"
-          onClick={(e) => {
-            setClicked(false);
-          }}
-        >
-          Home
-        </a>
-        <a
-          href="/#about-me"
-          className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer hover:bg-slate-100"
-          onClick={(e) => {
-            setClicked(false);
-          }}
-        >
-          About Me
-        </a>
-        <a
-          href="/#services"
-          className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer hover:bg-slate-100"
-          onClick={(e) => {
-            setClicked(false);
-          }}
-        >
-          Services
-        </a>
-        <a
-          href="/#projects"
-          className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer hover:bg-slate-100"
-          onClick={(e) => {
-            setClicked(false);
-          }}
-        >
-          Projects
-        </a>
-        <a
-          href="/#testimonials"
-          className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer hover:bg-slate-100"
-          onClick={(e) => {
-            setClicked(false);
-          }}
-        >
-          Testimonials
-        </a>
-        <a
-          href="/#contact"
-          className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer hover:bg-slate-100"
-          onClick={(e) => {
-            setClicked(false);
-          }}
-        >
-          Contact
-        </a>
-      </ul>
     </div>
   );
 }
diff --git a/src/app/_components/services/page.tsx b/src/app/_components/services/page.tsx
index fe7df6d..ef03772 100644
--- a/src/app/_components/services/page.tsx
+++ b/src/app/_components/services/page.tsx
@@ -60,7 +60,7 @@ export default function Services() {
           service!.title
         )}
       </h3>
-      <p className="w-full text-[14px] text-justify font-[400] text-black xl:text-[20px]">
+      <p className="w-full text-justify text-[14px] font-[400] text-black xl:text-[20px]">
         {loading ? (
           <Skeleton containerClassName={"w-full"} height={60} />
         ) : (