menuindex back

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

@@ -10,6 +10,8 @@ import MenuItemRenderer from "@/components/listview/MenuItemRenderer";
 import VerticalScrollView from "@/components/listview/VerticalScrollView";
 import useToggle from "@/hooks/helpers/useToggle";
 import { glassSurfaceFlat } from "@/lib/styles/glassSurface";
+import clsx from "clsx";
+import { motion } from "framer-motion";
 import { Candle2 } from "iconsax-react";
 import { useQueryState } from "next-usequerystate";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -37,7 +39,7 @@ const MenuIndex = () => {
   });
   const [selectedIngredients, setSelectedIngredients] = useQueryState("ingredients", { defaultValue: "" });
   const [selectedDeliveryId, setSelectedDeliveryId] = useQueryState("delivery", { defaultValue: "0" });
-  const categoryStickySentinelRef: React.RefObject<HTMLDivElement | null> = useRef(null);
+  const smallCategoriesRef: React.RefObject<HTMLDivElement | null> = useRef(null);
   const wrapperRef: React.RefObject<HTMLDivElement | null> = useRef(null);
   const [smallCategoriesVisible, setSmallCategoriesVisibility] = useState(false);
   const [isInitialMount, setIsInitialMount] = useState(true);
@@ -66,18 +68,16 @@ const MenuIndex = () => {
     const scrollContainer = wrapperRef.current.parentElement?.parentElement;
     if (!scrollContainer) return;
 
-    const sentinel = categoryStickySentinelRef.current;
-    if (!sentinel) return;
+    const handleScroll = () => {
+      if (!smallCategoriesRef.current) return;
+      setSmallCategoriesVisibility(scrollContainer.scrollTop >= smallCategoriesRef.current.offsetTop);
+    };
 
-    const observer = new IntersectionObserver(
-      ([entry]) => setSmallCategoriesVisibility(!entry.isIntersecting),
-      { root: scrollContainer, threshold: 0 },
-    );
-
-    observer.observe(sentinel);
+    scrollContainer.addEventListener("scroll", handleScroll, { passive: true });
+    handleScroll();
 
     return () => {
-      observer.disconnect();
+      scrollContainer.removeEventListener("scroll", handleScroll);
     };
   }, [isLoading]);
 
@@ -169,19 +169,11 @@ 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} />
-        <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>
+        <CategoryScroll categories={categories} selectedCategory={selectedCategory} onSelect={updateCategory} />
       </div>
 
-      <section className="w-full relative z-0">
-        <div className="flex flex-wrap gap-2 items-center relative">
+      <section className="w-full">
+        <div className="flex flex-wrap gap-2 items-center relative" ref={smallCategoriesRef}>
           <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]")}>
@@ -195,7 +187,22 @@ const MenuIndex = () => {
           </div>
         </div>
 
-        <VerticalScrollView className="mt-5!">
+        <motion.div
+          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>
           ) : (

src/components/wrapper/ClientMenuRouteWrapper.tsx

@@ -106,7 +106,7 @@ function ClientMenuRouteWrapper({ children }: Props) {
 
   return (
     <div className="h-svh overflow-hidden pt-10 flex flex-col pb-4 xl:pt-12">
-      <div className={glassSurface("z-50 fixed right-4 left-4 xl:right-[285px] top-4 xl:h-16 h-12 flex items-center px-4 justify-between rounded-[32px] xl:w-[calc(100%-305px)]")}>
+      <div data-menu-topbar className={glassSurface("z-50 fixed right-4 left-4 xl:right-[285px] top-4 xl:h-16 h-12 flex items-center px-4 justify-between rounded-[32px] xl:w-[calc(100%-305px)]")}>
         <TopBar
           profileDropState={profileDrop}
           toggleProfileDropState={toggleProfileDrop}
@@ -122,6 +122,7 @@ function ClientMenuRouteWrapper({ children }: Props) {
       {!hideBottomNav && (
         <div
           ref={navContainerRef}
+          data-menu-bottom-nav
           className="fixed bottom-7 left-0 right-0 z-45 px-4"
           style={{ willChange: "transform", transformOrigin: "center bottom" }}
         >