show subcategory

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

@@ -42,52 +42,69 @@ 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 (
-    <HorizontalScrollView
+    <div className="flex flex-col">
-      className={clsx(
+      <HorizontalScrollView
-        "w-full noscrollbar py-4!",
+        className={clsx(
-        variant === "large" && "mt-4!",
+          "w-full noscrollbar pt-4! pb-1!",
-        className
+          variant === "large" && "mt-4!",
-      )}
+          className
-    >
+        )}
-      {/* <Renderer
-        key="all"
-        className={clsx(selectedCategory === "0" && "bg-container!")}
-        onClick={handleSelect(0)}
       >
-        <Image
+        {categories.map((item) => {
-          priority
+          const isSelected =
-          src="/assets/images/food-image.png"
+            item.id === selectedCategory ||
-          width={imageSize}
+            item.children?.some((ch) => ch.id === selectedCategory);
-          height={imageSize}
-          alt="category image"
-        />
-        <span className="text-xs text-foreground">همه</span>
-      </Renderer> */}
-      {categories.map((item) => {
-        const isSelected = item.id === selectedCategory;
 
-        return (
+          return (
-          <Renderer
+            <Renderer
-            key={item.id}
+              key={item.id}
-            className={clsx(isSelected && "bg-container!")}
+              className={clsx(isSelected && "bg-container!")}
-            onClick={handleSelect(item.id)}
+              onClick={handleSelect(item.id)}
-          >
+            >
-            <Image
+              <Image
-              priority
+                priority
-              src={item.avatarUrl || "/assets/images/food-image.png"}
+                src={item.avatarUrl || "/assets/images/food-image.png"}
-              width={imageSize}
+                width={imageSize}
-              height={imageSize}
+                height={imageSize}
-              alt="category image"
+                alt="category image"
-            />
+              />
-            <span className="text-xs text-foreground text-center">{item.title}</span>
+              <span className="text-xs text-foreground text-center">{item.title}</span>
-          </Renderer>
+            </Renderer>
-        );
+          );
-      })}
+        })}
-    </HorizontalScrollView>
+      </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>