show subcategory

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

@@ -42,33 +42,26 @@ const CategoryScroll = ({
   className,
 }: Props) => {
   const { renderer: Renderer, imageSize } = variantConfig[variant];
+  const selectedParent =
+    categories.find((c) => c.id === selectedCategory) ??
+    categories.find((c) => c.children?.some((ch) => ch.id === selectedCategory));
+  const children = selectedParent?.children ?? [];
 
   const handleSelect = (categoryId: string) => () => onSelect(categoryId);
 
   return (
+    <div className="flex flex-col">
       <HorizontalScrollView
         className={clsx(
-        "w-full noscrollbar py-4!",
+          "w-full noscrollbar pt-4! pb-1!",
           variant === "large" && "mt-4!",
           className
         )}
       >
-      {/* <Renderer
-        key="all"
-        className={clsx(selectedCategory === "0" && "bg-container!")}
-        onClick={handleSelect(0)}
-      >
-        <Image
-          priority
-          src="/assets/images/food-image.png"
-          width={imageSize}
-          height={imageSize}
-          alt="category image"
-        />
-        <span className="text-xs text-foreground">همه</span>
-      </Renderer> */}
         {categories.map((item) => {
-        const isSelected = item.id === selectedCategory;
+          const isSelected =
+            item.id === selectedCategory ||
+            item.children?.some((ch) => ch.id === selectedCategory);
 
           return (
             <Renderer
@@ -88,6 +81,30 @@ const CategoryScroll = ({
           );
         })}
       </HorizontalScrollView>
+
+      {children.length > 0 && (
+        <HorizontalScrollView
+          className={clsx(
+            "w-full noscrollbar py-2!",
+            variant === "small" && "py-1!"
+          )}
+        >
+          {children.map((child) => {
+            const isChildSelected = child.id === selectedCategory;
+
+            return (
+              <CategorySmallItemRenderer
+                key={child.id}
+                className={clsx(isChildSelected && "bg-container!")}
+                onClick={handleSelect(child.id)}
+              >
+                <span className="text-[10px] text-foreground whitespace-nowrap">{child.title}</span>
+              </CategorySmallItemRenderer>
+            );
+          })}
+        </HorizontalScrollView>
+      )}
+    </div>
   );
 };
 

src/app/[name]/(Main)/page.tsx

@@ -109,8 +109,20 @@ const MenuIndex = () => {
     const lowerFilterQuery = filterSearch ? filterSearch.toLowerCase() : "";
     const selectedCatId = selectedCategory === '0' ? null : selectedCategory;
 
+    // اگر دستهٔ اصلی انتخاب شده، خودش + همهٔ زیردسته‌ها را در نظر بگیر تا غذاهای زیردسته هم بیایند
+    const effectiveCategoryIds = (() => {
+      if (!selectedCatId) return null;
+      const parent = categories.find((c) => c.id === selectedCatId);
+      if (parent?.children?.length) {
+        return new Set([parent.id, ...parent.children.map((ch) => ch.id)]);
+      }
+      return new Set([selectedCatId]);
+    })();
+
     const filtered = products.filter((item) => {
-      const matchesCategory = !selectedCatId || item.category?.id === selectedCatId;
+      const matchesCategory =
+        !selectedCatId ||
+        (item.category?.id != null && effectiveCategoryIds?.has(item.category.id));
       const itemName = item.name ?? item.title;
       const matchesSearch =
         !search || itemName.toLowerCase().includes(lowerSearch);
@@ -149,7 +161,7 @@ const MenuIndex = () => {
           return 0;
       }
     });
-  }, [selectedCategory, search, filterSearch, products, sorting]);
+  }, [selectedCategory, search, filterSearch, products, sorting, categories]);
 
   if (isLoading) {
     return <MenuSkeleton viewMode={viewMode} />;

src/app/[name]/(Main)/types/Types.ts

@@ -10,10 +10,13 @@ export interface Category {
   createdAt: string;
   updatedAt: string;
   deletedAt: string | null;
+  parent: string | null;
   title: string;
   isActive: boolean;
-  restaurant: string;
+  shop: string;
   avatarUrl: string | null;
+  order: number | null;
+  children: Category[];
 }
 
 export type CategoriesResponse = BaseResponse<Category[]>;

src/components/listview/CategorySmallItemRenderer.tsx

@@ -11,7 +11,7 @@ function CategorySmallItemRenderer({ children, ...rest }: Props) {
         <div className={`${rest.className} cursor-pointer transition-all duration-200 ease-out gradient-border overflow-hidden rounded-xl backdrop-blur-md bg-container/40 dark:bg-background`}>
             <div
                 {...rest}
-                className="rounded-normal h-[44px] flex flex-row justify-center items-center p-2.5 gap-2"
+                className="rounded-normal flex flex-row justify-center items-center h-8 px-2 gap-2"
             >
                 {children}
             </div>