From 7aa686166bf801f4bac79ec92b86de3a19f9182c Mon Sep 17 00:00:00 2001
From: Mohammed Al-yaseen <mohammed.o.alyaseen@gmail.com>
Date: Tue, 28 Oct 2025 13:04:17 +0300
Subject: [PATCH] add order type "select" to menu header

---
 src/pages/menu/components/SearchButton.tsx |  6 ++--
 src/pages/menu/menu.module.css             | 32 ++++++++++++++--------
 src/pages/menu/page.tsx                    | 23 ++++++++++------
 3 files changed, 40 insertions(+), 21 deletions(-)

diff --git a/src/pages/menu/components/SearchButton.tsx b/src/pages/menu/components/SearchButton.tsx
index 8e0942c..bd2dc2d 100644
--- a/src/pages/menu/components/SearchButton.tsx
+++ b/src/pages/menu/components/SearchButton.tsx
@@ -6,9 +6,11 @@ import styles from "../menu.module.css";
 export default function SearchButton() {
   const navigate = useNavigate();
   const { id } = useParams();
-  
+
   return (
-    <div className={styles.searchButtonContainer}>
+    <div
+      className={`${styles.headerFloatingBtn} ${styles.searchButtonContainer}`}
+    >
       <Button
         className={styles.searchButton}
         icon={<SearchIcon />}
diff --git a/src/pages/menu/menu.module.css b/src/pages/menu/menu.module.css
index 50955c9..bc6b001 100644
--- a/src/pages/menu/menu.module.css
+++ b/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 {
-  position: absolute;
-  z-index: 999;
-  right: 20px;
-  top: 70px;
-  background-color: #fff;
+.backButtonContainer {
+  left: 20px;
+  border-radius: 50%;
+}
+.orderTypeSelectContainer {
+  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 {
@@ -570,7 +580,7 @@
     border-radius: 12px !important;
   }
 
-  .contentWrapper{
+  .contentWrapper {
     margin-top: 16px;
   }
 }
diff --git a/src/pages/menu/page.tsx b/src/pages/menu/page.tsx
index f9aaa09..42e3bef 100644
--- a/src/pages/menu/page.tsx
+++ b/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 className={styles.backButtonContainer}>
+            <div
+              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 &&
-                   <LoyaltyCard />}
+                  restaurant?.is_loyalty_enabled && <LoyaltyCard />}
                 <CategoriesList categories={menuData?.categories || []} />
               </div>