From 4d0c7affd9dc3961686cb90e301e8706dd1cb6a6 Mon Sep 17 00:00:00 2001
From: parsa aghaei <p.aghaei@hoshmand.local>
Date: Tue, 24 Sep 2024 18:49:52 +0330
Subject: [PATCH] mobileMenu updated

---
 src/app/_components/burger-button/page.tsx | 37 ++++++----------------
 src/app/_components/mobile-menu/page.tsx   |  4 +--
 src/app/globals.css                        |  2 +-
 3 files changed, 13 insertions(+), 30 deletions(-)

diff --git a/src/app/_components/burger-button/page.tsx b/src/app/_components/burger-button/page.tsx
index d6eb56c..e2446a2 100644
--- a/src/app/_components/burger-button/page.tsx
+++ b/src/app/_components/burger-button/page.tsx
@@ -7,36 +7,19 @@ export default function BurgerButton() {
   const [clicked, setClicked] = useState(false);
   return (
     <>
-      {clicked ? (
-        
-        <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]"
-          onClick={() => setClicked(!clicked)}
-        >
-          <Image
-          src={"/images/icons/close-square.svg"}
+      <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"
+        onClick={() => setClicked(!clicked)}
+      >
+        <Image
+          src={"/images/icons/burger-menu.svg"}
           width={25}
           height={25}
-          alt="close burger-menu svg"
-          className="cursor-pointer burger-menu"
-        />
-        </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]"
+          alt="burger-menu svg"
+          className="burger-menu"
           onClick={() => setClicked(!clicked)}
-        >
-          <Image
-            src={"/images/icons/burger-menu.svg"}
-            width={25}
-            height={25}
-            alt="burger-menu svg"
-            className="burger-menu"
-            onClick={() => setClicked(!clicked)}
-          />
-        </button>
-      )}
+        />
+      </button>
       <MobileMenu clicked={clicked} setClicked={setClicked} />
     </>
   );
diff --git a/src/app/_components/mobile-menu/page.tsx b/src/app/_components/mobile-menu/page.tsx
index ef80140..f25d8cd 100644
--- a/src/app/_components/mobile-menu/page.tsx
+++ b/src/app/_components/mobile-menu/page.tsx
@@ -6,11 +6,11 @@ export default function MobileMenu({ clicked, setClicked }: propsType) {
   return (
     <div className="flex">
       <div
-        className={`${clicked ? "fixed right-0" : "right-[-1000px] hidden"} top-[98px] z-30 flex h-full w-full bg-slate-950 opacity-20 lg:hidden`}
+        className={`${clicked ? "fixed right-0" : "right-[-1000px] hidden"} top-0 z-30 flex h-full w-full bg-slate-950 opacity-20 lg:hidden`}
         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]`}
+        className={`fixed left-0 top-0 z-40 flex h-full w-[250px] select-none 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]">
diff --git a/src/app/globals.css b/src/app/globals.css
index 20216e2..dc9a613 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -34,7 +34,7 @@ html {
   opacity: 0.1;
   animation: fade-in linear forwards;
   animation-timeline: view();
-  animation-range: 250px 500px;
+  animation-range: 100px 300px;
 }
 
 @keyframes scroll-watcher {