change size with scroll

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

@@ -9,10 +9,8 @@ import MenuItem from "@/components/listview/MenuItem";
 import MenuItemRenderer from "@/components/listview/MenuItemRenderer";
 import VerticalScrollView from "@/components/listview/VerticalScrollView";
 import useToggle from "@/hooks/helpers/useToggle";
-import clsx from "clsx";
-import { motion } from "framer-motion";
-import { Candle2 } from "iconsax-react";
 import { glassSurfaceFlat } from "@/lib/styles/glassSurface";
+import { Candle2 } from "iconsax-react";
 import { useQueryState } from "next-usequerystate";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -39,7 +37,7 @@ const MenuIndex = () => {
   });
   const [selectedIngredients, setSelectedIngredients] = useQueryState("ingredients", { defaultValue: "" });
   const [selectedDeliveryId, setSelectedDeliveryId] = useQueryState("delivery", { defaultValue: "0" });
-  const smallCategoriesRef: React.RefObject<HTMLDivElement | null> = useRef(null);
+  const categoryStickySentinelRef: React.RefObject<HTMLDivElement | null> = useRef(null);
   const wrapperRef: React.RefObject<HTMLDivElement | null> = useRef(null);
   const [smallCategoriesVisible, setSmallCategoriesVisibility] = useState(false);
   const [isInitialMount, setIsInitialMount] = useState(true);
@@ -68,16 +66,18 @@ const MenuIndex = () => {
     const scrollContainer = wrapperRef.current.parentElement?.parentElement;
     if (!scrollContainer) return;
 
-    const handleScroll = () => {
+    const sentinel = categoryStickySentinelRef.current;
-      if (!smallCategoriesRef.current) return;
+    if (!sentinel) return;
-      setSmallCategoriesVisibility(scrollContainer.scrollTop >= smallCategoriesRef.current.offsetTop);
-    };
 
-    scrollContainer.addEventListener("scroll", handleScroll, { passive: true });
+    const observer = new IntersectionObserver(
-    handleScroll();
+      ([entry]) => setSmallCategoriesVisibility(!entry.isIntersecting),
+      { root: scrollContainer, threshold: 0 },
+    );
+
+    observer.observe(sentinel);
 
     return () => {
-      scrollContainer.removeEventListener("scroll", handleScroll);
+      observer.disconnect();
     };
   }, [isLoading]);
 
@@ -169,40 +169,33 @@ const MenuIndex = () => {
     <div className="flex flex-col gap-4 items-center pt-5 mb-8" ref={wrapperRef}>
       <div className="w-full">
         <SearchBox value={search} placeholder={tCommon("SearchPlaceholder")} onChange={updateSearch} />
-        <CategoryScroll categories={categories} selectedCategory={selectedCategory} onSelect={updateCategory} />
+        <div ref={categoryStickySentinelRef} className="h-px w-full" aria-hidden />
+        <div className="sticky z-20 top-16 xl:top-20 w-full">
+          <CategoryScroll
+            categories={categories}
+            selectedCategory={selectedCategory}
+            onSelect={updateCategory}
+            variant={smallCategoriesVisible ? "small" : "large"}
+          />
+        </div>
       </div>
 
-      <section className="w-full">
+      <section className="w-full relative z-0">
-        <div className="flex flex-wrap gap-2 items-center relative" ref={smallCategoriesRef}>
+        <div className="flex flex-wrap gap-2 items-center relative">
           <span className="sm:text-base text-sm font-medium max-w-[113px] sm:max-w-auto">{selectedCategory === "0" ? "" : categories.find((c) => c.id === selectedCategory)?.title || ""}</span>
           <div className="flex min-w-[247px] flex-1 gap-2 justify-end items-center">
-            <button onClick={toggleFilterModal} className={glassSurfaceFlat('rounded-xl h-8 ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-[7px]')}>
+            <button onClick={toggleFilterModal} className={glassSurfaceFlat("rounded-xl h-8 ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-[7px]")}>
               <Candle2 className="stroke-foreground" size={16} />
               <span className="text-xs leading-5 font-medium whitespace-nowrap">{tMenu("MenuFilterDrawer.Label")}</span>
             </button>
-            <button onClick={toggleSortingModal} className={glassSurfaceFlat('rounded-xl h-8 ps-4 pe-2 py-1.5 inline-flex items-center gap-2')}>
+            <button onClick={toggleSortingModal} className={glassSurfaceFlat("rounded-xl h-8 ps-4 pe-2 py-1.5 inline-flex items-center gap-2")}>
               <TextAlignIcon className="text-foreground" />
               <span className="text-xs leading-5 font-medium whitespace-nowrap">{activeSortingLabel}</span>
             </button>
           </div>
         </div>
 
-        <motion.div
+        <VerticalScrollView className="mt-5!">
-          initial={{
-            y: smallCategoriesVisible ? 0 : -50,
-            opacity: smallCategoriesVisible ? 1 : 0,
-          }}
-          animate={{
-            y: smallCategoriesVisible ? 0 : -50,
-            opacity: smallCategoriesVisible ? 1 : 0,
-          }}
-          transition={{ duration: 0.1 }}
-          className={clsx(glassSurfaceFlat('fixed left-0 z-10 top-0 px-4 pt-16 right-0 xl:pr-72 xl:pt-20 border-x-0 border-t-0 rounded-none'), !smallCategoriesVisible && "pointer-events-none")}
-        >
-          <CategoryScroll categories={categories} selectedCategory={selectedCategory} onSelect={updateCategory} variant="small" />
-        </motion.div>
-
-        <VerticalScrollView className="mt-5! overflow-y-auto h-full">
           {filteredReceiptItems.length === 0 ? (
             <div className="text-center text-foreground/60 py-8">{foodsData ? "غذایی یافت نشد" : "در حال بارگذاری..."}</div>
           ) : (