fix sticky categories

src/app/[name]/(Main)/components/MenuIndex.tsx

@@ -52,8 +52,6 @@ const MenuIndex = () => {
   }, [isInitialMount, setSearch, setSelectedIngredients, setSelectedDeliveryId, setSorting]);
 
   useEffect(() => {
-    console.log('selectedCategory', selectedCategory);
-
     if (categoriesData?.data && selectedCategory === '0') {
       setSelectedCategory(categoriesData?.data?.[0]?.id)
     }
@@ -62,28 +60,26 @@ const MenuIndex = () => {
   }, [selectedCategory, categoriesData])
 
 
-  const onScroll = useCallback(() => {
-    if (!wrapperRef?.current?.parentElement?.parentElement?.scrollTop || !smallCategoriesRef.current?.offsetTop) return;
-
-    if (wrapperRef.current.parentElement?.parentElement.scrollTop >= smallCategoriesRef.current.offsetTop) {
-      setSmallCategoriesVisibility(true);
-    } else {
-      setSmallCategoriesVisibility(false);
-    }
-  }, [wrapperRef, smallCategoriesRef]);
-
   useEffect(() => {
-    if (!wrapperRef.current) return;
+    if (isLoading || !wrapperRef.current) return;
 
-    const parent = wrapperRef.current.parentElement?.parentElement;
-    if (!parent) return;
+    const scrollContainer = wrapperRef.current.parentElement?.parentElement;
+    if (!scrollContainer) return;
 
-    parent.addEventListener('scroll', onScroll);
+    const handleScroll = () => {
+      if (!smallCategoriesRef.current) return;
+      setSmallCategoriesVisibility(
+        scrollContainer.scrollTop >= smallCategoriesRef.current.offsetTop,
+      );
+    };
+
+    scrollContainer.addEventListener('scroll', handleScroll, { passive: true });
+    handleScroll();
 
     return () => {
-      parent.removeEventListener('scroll', onScroll);
-    }
-  }, [onScroll]);
+      scrollContainer.removeEventListener('scroll', handleScroll);
+    };
+  }, [isLoading]);
 
 
   const updateSearch = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
@@ -199,7 +195,7 @@ const MenuIndex = () => {
           transition={{ duration: .1 }}
           className={clsx(
             'fixed left-0 z-10 top-0 px-4 pt-16 bg-[#F4F5F9CC] dark:bg-background/70 backdrop-blur-[44px] right-0 xl:pr-72 xl:pt-20',
-            ``
+            !smallCategoriesVisible && 'pointer-events-none',
           )}>
           <CategoryScroll
             categories={categories}