From 86aebd7a9fc27026ea4d474769c6bbc11b2d7215 Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Sun, 4 Jan 2026 16:38:04 +0330
Subject: [PATCH] back in fixed category

---
 src/app/[name]/(Main)/[id]/page.tsx             | 14 ++++++++++++--
 .../[name]/(Main)/components/CategoryScroll.tsx | 11 +++++------
 src/app/[name]/(Main)/page.tsx                  | 17 +++++++++--------
 src/components/listview/MenuItem.tsx            |  2 +-
 4 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/src/app/[name]/(Main)/[id]/page.tsx b/src/app/[name]/(Main)/[id]/page.tsx
index b7755fd..4623160 100644
--- a/src/app/[name]/(Main)/[id]/page.tsx
+++ b/src/app/[name]/(Main)/[id]/page.tsx
@@ -19,7 +19,7 @@ type Props = object
 
 function FoodPage({ }: Props) {
 
-    const { id } = useParams();
+    const { id, name } = useParams();
     const router = useRouter();
     const { isSuccess } = useGetProfile();
     const { data: food, isLoading } = useGetFood(id as string);
@@ -116,6 +116,16 @@ function FoodPage({ }: Props) {
         ? foodData.content.join('، ')
         : foodData.content || foodData.desc || '';
 
+    const handleBackToMenu = () => {
+        const urlParams = new URLSearchParams(window.location.search);
+        const categoryParam = urlParams.get('category') || foodData.category?.id;
+        if (categoryParam) {
+            router.push(`/${name}?category=${categoryParam}`);
+        } else {
+            router.push(`/${name}`);
+        }
+    };
+
     return (
         <div className='lg:absolute lg:top-1/2 not-lg:max-w-lg not-lg:place-self-center lg:-translate-y-1/2 xl:right-[285px] lg:left-5 lg:right-4 lg:bottom-4 not-lg:w-full not-md:-translate-y-2 pt-6 flex flex-col lg:grid grid-cols-2 bottom-10'>
             <div className="relative w-full h-full not-lg:bg-container rounded-2xl overflow-hidden lg:rounded-r-none lg:order-1">
@@ -132,7 +142,7 @@ function FoodPage({ }: Props) {
                     <div className="bg-container whitespace-nowrap rounded-[34px] py-1.5 px-4 w-min text-xs text-disabled2 dark:text-disabled-text font-bold">
                         {categoryName || '-'}
                     </div>
-                    <button onClick={() => router.back()} className='p-2 rounded-full bg-container/40'>
+                    <button onClick={handleBackToMenu} className='p-2 rounded-full bg-container/40'>
                         <ArrowLeft size={18} className='stroke-primary dark:stroke-foreground' />
                     </button>
                 </div>
diff --git a/src/app/[name]/(Main)/components/CategoryScroll.tsx b/src/app/[name]/(Main)/components/CategoryScroll.tsx
index f25fd66..548fb73 100644
--- a/src/app/[name]/(Main)/components/CategoryScroll.tsx
+++ b/src/app/[name]/(Main)/components/CategoryScroll.tsx
@@ -29,7 +29,7 @@ const variantConfig: Record<
 type Props = {
   categories: Category[];
   selectedCategory: string;
-  onSelect: (index: number) => void;
+  onSelect: (categoryId: string) => void;
   variant?: Variant;
   className?: string;
 };
@@ -43,7 +43,7 @@ const CategoryScroll = ({
 }: Props) => {
   const { renderer: Renderer, imageSize } = variantConfig[variant];
 
-  const handleSelect = (index: number) => () => onSelect(index);
+  const handleSelect = (categoryId: string) => () => onSelect(categoryId);
 
   return (
     <HorizontalScrollView
@@ -67,15 +67,14 @@ const CategoryScroll = ({
         />
         <span className="text-xs text-foreground">همه</span>
       </Renderer> */}
-      {categories.map((item, index) => {
-        const categoryIndex = index;
-        const isSelected = String(categoryIndex) === selectedCategory;
+      {categories.map((item) => {
+        const isSelected = item.id === selectedCategory;
 
         return (
           <Renderer
             key={item.id}
             className={clsx(isSelected && "bg-container!")}
-            onClick={handleSelect(categoryIndex)}
+            onClick={handleSelect(item.id)}
           >
             <Image
               priority
diff --git a/src/app/[name]/(Main)/page.tsx b/src/app/[name]/(Main)/page.tsx
index 01850fb..ece8712 100644
--- a/src/app/[name]/(Main)/page.tsx
+++ b/src/app/[name]/(Main)/page.tsx
@@ -44,13 +44,14 @@ const MenuIndex = () => {
   useEffect(() => {
     if (isInitialMount) {
       setSearch(null);
-      setSelectedCategory(null);
+      // category را نگه می‌داریم تا در بک زدن حفظ شود
+      // setSelectedCategory(null);
       setSelectedIngredients(null);
       setSelectedDeliveryId(null);
       setSorting(null);
       setIsInitialMount(false);
     }
-  }, [isInitialMount, setSearch, setSelectedCategory, setSelectedIngredients, setSelectedDeliveryId, setSorting]);
+  }, [isInitialMount, setSearch, setSelectedIngredients, setSelectedDeliveryId, setSorting]);
 
   const onScroll = useCallback(() => {
     if (!wrapperRef?.current?.parentElement?.parentElement?.scrollTop || !smallCategoriesRef.current?.offsetTop) return;
@@ -80,8 +81,8 @@ const MenuIndex = () => {
     setSearch(e.target.value);
   }, [setSearch]);
 
-  const updateCategory = useCallback((index: number) => {
-    setSelectedCategory(String(index));
+  const updateCategory = useCallback((categoryId: string) => {
+    setSelectedCategory(categoryId);
   }, [setSelectedCategory]);
 
   const sortingIndex = Number(sorting);
@@ -106,10 +107,10 @@ const MenuIndex = () => {
     if (!foods.length) return [];
     const lowerSearch = search.toLowerCase();
     const lowerIngredients = selectedIngredients ? selectedIngredients.toLowerCase() : "";
-    const selectedCatId = categories[+selectedCategory]?.id;
+    const selectedCatId = selectedCategory === '0' ? null : selectedCategory;
 
     const filtered = foods.filter((item) => {
-      const matchesCategory = item.category?.id === selectedCatId;
+      const matchesCategory = !selectedCatId || item.category?.id === selectedCatId;
       const itemName = item.name || item.title || item.foodName || "";
       const matchesSearch =
         !search || itemName.toLowerCase().includes(lowerSearch);
@@ -150,7 +151,7 @@ const MenuIndex = () => {
           return 0;
       }
     });
-  }, [selectedCategory, search, selectedIngredients, selectedDeliveryId, foods, categories, sorting]);
+  }, [selectedCategory, search, selectedIngredients, selectedDeliveryId, foods, sorting]);
 
   if (isLoading) {
     return <MenuSkeleton />;
@@ -170,7 +171,7 @@ const MenuIndex = () => {
       <section className="w-full">
         <div className="flex gap-2 justify-between items-center relative" ref={smallCategoriesRef} >
           <span className="sm:text-base text-sm font-medium">
-            {categories[+selectedCategory]?.title || ''}
+            {selectedCategory === '0' ? '' : categories.find(c => c.id === selectedCategory)?.title || ''}
           </span>
           <div className="inline-flex min-w-[247px] gap-2 justify-around items-center">
             <button onClick={toggleFilterModal} className="rounded-xl h-8 bg-container ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-[7px]">
diff --git a/src/components/listview/MenuItem.tsx b/src/components/listview/MenuItem.tsx
index f5d6f12..6dcb19d 100644
--- a/src/components/listview/MenuItem.tsx
+++ b/src/components/listview/MenuItem.tsx
@@ -93,7 +93,7 @@ const MenuItem = ({ food }: MenuItemProps) => {
     removeFromCart(food.id);
   };
 
-  const foodDetailUrl = `/${name}/${food.id}`;
+  const foodDetailUrl = `/${name}/${food.id}?category=${food.category.id}`;
 
   return (
     <div className="flex gap-4 w-full h-full items-center">