category scroll

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

@@ -106,12 +106,10 @@ const MenuIndex = () => {
     if (!foods.length) return [];
     const lowerSearch = search.toLowerCase();
     const lowerIngredients = selectedIngredients ? selectedIngredients.toLowerCase() : "";
-    const selectedCatId =
-      selectedCategory === "0" ? null : categories[+selectedCategory - 1]?.id;
+    const selectedCatId = categories[+selectedCategory]?.id;
 
     const filtered = foods.filter((item) => {
-      const matchesCategory =
-        selectedCategory === "0" || item.category?.id === selectedCatId;
+      const matchesCategory = item.category?.id === selectedCatId;
       const itemName = item.name || item.title || item.foodName || "";
       const matchesSearch =
         !search || itemName.toLowerCase().includes(lowerSearch);
@@ -163,11 +161,11 @@ const MenuIndex = () => {
       </div>
 
       <section className="w-full">
-        <div className="flex justify-between items-center relative" ref={smallCategoriesRef} >
-          <span className="text-base font-medium">
-            {selectedCategory === '0' ? 'همه' : categories[+selectedCategory - 1]?.title || ''}
+        <div className="flex gap-2 justify-between items-center relative" ref={smallCategoriesRef} >
+          <span className="sm:text-base text-sm font-medium">
+            {categories[+selectedCategory]?.title || ''}
           </span>
-          <div className="inline-flex gap-2 justify-around items-center">
+          <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]">
               <Candle2 className="stroke-foreground" size={16} />
               <span className="text-xs leading-5 font-medium">{tMenu('MenuFilterDrawer.Label')}</span>