diff --git a/src/pages/menu/components/CategoriesList/CategoriesList.module.css b/src/pages/menu/components/CategoriesList/CategoriesList.module.css
index a3aa3be..d8e1e5d 100644
--- a/src/pages/menu/components/CategoriesList/CategoriesList.module.css
+++ b/src/pages/menu/components/CategoriesList/CategoriesList.module.css
@@ -120,6 +120,7 @@
gap: 14px;
padding: 0.5rem 1rem 1rem 1rem;
user-select: none;
+ margin-bottom: 0.5rem;
}
.categoriesContainer::-webkit-scrollbar {
diff --git a/src/pages/menu/components/CategoriesList/CategoriesList.tsx b/src/pages/menu/components/CategoriesList/CategoriesList.tsx
index 69ac3ad..b6e78ef 100644
--- a/src/pages/menu/components/CategoriesList/CategoriesList.tsx
+++ b/src/pages/menu/components/CategoriesList/CategoriesList.tsx
@@ -265,13 +265,16 @@ export function CategoriesList({ categories }: CategoriesListProps) {
borderStartEndRadius: isCategoriesSticky ? 888 : 0,
borderEndEndRadius: isCategoriesSticky ? 888 : 0,
borderEndStartRadius: isCategoriesSticky ? 888 : 0,
- backgroundColor: "var(--background)",
+ backgroundColor:
+ isCategoriesSticky && activeCategory === category.id
+ ? "#FFB70014"
+ : "var(--background)",
}
: { borderRadius: 8 }),
width: 104,
height: 30,
marginBottom: 1,
- border: "none"
+ border: "none",
}}
>
{isRTL
- ? category.name || category.nameEN
+ ? category.nameAR || category.name
: category.nameEN || category.name}
diff --git a/src/pages/menu/components/MenuList/MenuList.tsx b/src/pages/menu/components/MenuList/MenuList.tsx
index b050172..6e27038 100644
--- a/src/pages/menu/components/MenuList/MenuList.tsx
+++ b/src/pages/menu/components/MenuList/MenuList.tsx
@@ -67,9 +67,12 @@ export function MenuList({ data, categoryRefs }: MenuListProps) {
>
diff --git a/src/pages/menu/components/MenuList/ProductCard.tsx b/src/pages/menu/components/MenuList/ProductCard.tsx
index 22eb370..67351de 100644
--- a/src/pages/menu/components/MenuList/ProductCard.tsx
+++ b/src/pages/menu/components/MenuList/ProductCard.tsx
@@ -11,7 +11,6 @@ import { useAppSelector } from "redux/hooks.ts";
import { useParams, useNavigate } from "react-router-dom";
import { ProductPreviewDialog } from "pages/menu/components/ProductPreviewDialog";
import { useState } from "react";
-import StarIcon from "components/Icons/StarIcon";
type Props = {
item: Product;
@@ -96,7 +95,7 @@ export default function ProductCard({ item }: Props) {
letterSpacing: "0%",
}}
>
- {isRTL ? item.name : item.nameOther}
+ {isRTL ? item.nameOther : item.name}
{item.description && (