work on order type "select" in menu header

src/pages/menu/menu.module.css

@@ -432,17 +432,32 @@
   border-radius: 50%;
 }
 .orderTypeSelectContainer {
-  width: 20%;
+  width: 28%;
   height: 32px;
-  left: 40%;
+  left: 36%;
   border-radius: 40%;
 }
 .orderTypeSelect {
-  width: 90%;
+  width: 95%;
   margin-left: 5%;
   margin-right: 5%;
 }
 
+/* Style for the select component and its dropdown */
+:global(.ant-select .ant-select-selection-item) {
+  font-size: 12px !important;
+  font-weight: 700 !important;
+  text-align: center;
+}
+:global(.ant-select .ant-select-arrow) {
+  font-weight: 600 !important;
+  color:black;
+}
+:global(.ant-select-dropdown .ant-select-item) {
+  font-size: 12px !important;
+  font-weight: 600 !important;
+}
+
 .searchButtonContainer {
   right: 20px;
   border-radius: 50%;

src/pages/menu/page.tsx

@@ -26,6 +26,8 @@ import MenuSkeleton from "./components/MenuSkeleton/MenuSkeleton";
 import ScrollEventHandler from "./components/ScrollEventHandler";
 import SearchButton from "./components/SearchButton";
 import styles from "./menu.module.css";
+import { enumToSelectOptions } from "utils/helpers/helperFunctions.ts";
+import { OrderType } from "pages/checkout/hooks/types.ts";
 
 function MenuPage() {
   const { id } = useParams();
@@ -45,6 +47,8 @@ function MenuPage() {
   const { isMobile, isTablet, isDesktop } = useBreakPoint();
   const isLoading = isLoadingRestaurant || isLoadingMenu;
 
+  const orderTypeOptions = enumToSelectOptions(OrderType, t, "orderTypes");
+
   // Automatically load restaurant taxes when restaurant data is available
   useRestaurant(restaurant);
 
@@ -97,10 +101,11 @@ function MenuPage() {
               className={`${styles.headerFloatingBtn} ${styles.orderTypeSelectContainer}`}
             >
               <Select
-                options={[]}
+                options={orderTypeOptions}
                 variant="borderless"
                 size="small"
                 className={styles.orderTypeSelect}
+                listHeight={150}
               />
             </div>
             <SearchButton />