add order type "select" to menu header

src/pages/menu/components/SearchButton.tsx

@@ -8,7 +8,9 @@ export default function SearchButton() {
   const { id } = useParams();
 
   return (
-    <div className={styles.searchButtonContainer}>
+    <div
+      className={`${styles.headerFloatingBtn} ${styles.searchButtonContainer}`}
+    >
       <Button
         className={styles.searchButton}
         icon={<SearchIcon />}

src/pages/menu/menu.module.css

@@ -418,24 +418,34 @@
   height: 12px;
 }
 
-.backButtonContainer {
+.headerFloatingBtn {
   position: absolute;
   z-index: 999;
-  left: 20px;
   top: 70px;
+
   background-color: #fff;
-  border-radius: 50%;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
-.searchButtonContainer {
+.backButtonContainer {
-  position: absolute;
+  left: 20px;
-  z-index: 999;
+  border-radius: 50%;
-  right: 20px;
+}
-  top: 70px;
+.orderTypeSelectContainer {
-  background-color: #fff;
+  width: 20%;
+  height: 32px;
+  left: 40%;
+  border-radius: 40%;
+}
+.orderTypeSelect {
+  width: 90%;
+  margin-left: 5%;
+  margin-right: 5%;
+}
+
+.searchButtonContainer {
+  right: 20px;
   border-radius: 50%;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
 .searchButton {

src/pages/menu/page.tsx

@@ -1,5 +1,5 @@
 import { StarFilled } from "@ant-design/icons";
-import { Image, Space } from "antd";
+import { Image, Space, Select } from "antd";
 import { FloatingButton } from "components/FloatingButton/FloatingButton";
 import ImageWithFallback from "components/ImageWithFallback";
 import LoyaltyCard from "components/LoyaltyCard/LoyaltyCard";
@@ -69,7 +69,6 @@ function MenuPage() {
                 width: "100vw",
               }}
             />
-
             <Image
               src={restaurant?.restaurant_logo}
               alt={t("menu.restaurantLogo")}
@@ -77,10 +76,8 @@ function MenuPage() {
               width={"100%"}
               preview={false}
             />
-
             <div className={styles.leftShape}></div>
             <div className={styles.rightShape}></div>
-
             {/* <ResponsiveServices
               orderType={orderType}
               translations={{
@@ -91,10 +88,21 @@ function MenuPage() {
                 },
               }}
             /> */}
-
+            <div
-            <div className={styles.backButtonContainer}>
+              className={`${styles.headerFloatingBtn} ${styles.backButtonContainer}`}
+            >
               <BackButton />
             </div>
+            <div
+              className={`${styles.headerFloatingBtn} ${styles.orderTypeSelectContainer}`}
+            >
+              <Select
+                options={[]}
+                variant="borderless"
+                size="small"
+                className={styles.orderTypeSelect}
+              />
+            </div>
             <SearchButton />
           </div>
 
@@ -121,8 +129,7 @@ function MenuPage() {
             <Space direction="vertical" style={{ width: "100%", gap: 16 }}>
               <div>
                 {restaurant?.loyalty_stamps &&
-                  restaurant?.is_loyalty_enabled &&
+                  restaurant?.is_loyalty_enabled && <LoyaltyCard />}
-                   <LoyaltyCard />}
                 <CategoriesList categories={menuData?.categories || []} />
               </div>