diff --git a/src/app/[name]/(Main)/components/MenuIndex.tsx b/src/app/[name]/(Main)/components/MenuIndex.tsx index 89ef41d..0182ef1 100644 --- a/src/app/[name]/(Main)/components/MenuIndex.tsx +++ b/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) => { @@ -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', )}>