mobileMenu updated

src/app/_components/burger-button/page.tsx

@@ -7,24 +7,8 @@ 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"}
-          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]"
+        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
@@ -36,7 +20,6 @@ export default function BurgerButton() {
           onClick={() => setClicked(!clicked)}
         />
       </button>
-      )}
       <MobileMenu clicked={clicked} setClicked={setClicked} />
     </>
   );

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]">

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 {