implement logo container and handle rtl styles

src/components/Icons/LogoContainerIcon.tsx

@@ -0,0 +1,25 @@
+interface logoContainerIconType {
+  className?: string;
+  onClick?: () => void;
+}
+
+const LogoContainerIcon = ({ className, onClick }: logoContainerIconType) => {
+  return (
+    <svg
+      width="118"
+      height="82"
+      viewBox="0 0 118 82"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      onClick={onClick}
+    >
+      <path
+        d="M54 0C76.0914 0 94 17.9086 94 40C94 47.3496 99.1148 55 106.464 55H107.165C113.149 55 118 59.851 118 65.8349V68.5C118 75.9558 111.956 82 104.5 82H4.5C-2.95584 82 -9 75.9558 -9 68.5V65.4323C-9 59.6707 -4.28753 55 1.47406 55C8.82363 55 14 47.3496 14 40C14 17.9086 31.9086 0 54 0Z"
+        fill="#F7F7F7"
+      />
+    </svg>
+  );
+};
+
+export default LogoContainerIcon;

src/pages/menu/menu.module.css

@@ -49,20 +49,28 @@
 
 .logo {
   position: absolute;
-  left: 33px;
+  left: 19px;
   top: -64px;
   border-radius: 50%;
   /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */
-  z-index: 10;
-  border: 3px solid var(--background);
-  width: 72px !important;
-  height: 72px !important;
+  z-index: 111;
+  width: 70px !important;
+  height: 70px !important;
+  border-image-source: linear-gradient(
+    180deg,
+    #ffffff 0%,
+    rgba(255, 255, 255, 0) 100%
+  );
 }
 
 :global(.darkApp) .logo {
   border-color: var(--background);
 }
 
+:global(.ant-app-rtl) .logo {
+  right: 19px;
+}
+
 .services {
   height: 36px;
   position: absolute;
@@ -669,4 +677,15 @@
   .navButton {
     display: none !important;
   }
-}
+}
+
+.logoContainerIcon {
+  position: absolute !important;
+  left: 0px !important;
+  top: 127px !important;
+  z-index: 10 !important;
+}
+
+:global(.ant-app-rtl) .logoContainerIcon {
+  right: -10px !important;
+}

src/pages/menu/page.tsx

@@ -1,6 +1,7 @@
 import { StarFilled } from "@ant-design/icons";
 import { Image, Select, Space } from "antd";
 import { FloatingButton } from "components/FloatingButton/FloatingButton";
+import LogoContainerIcon from "components/Icons/LogoContainerIcon";
 import ImageWithFallback from "components/ImageWithFallback";
 import LoyaltyCard from "components/LoyaltyCard/LoyaltyCard";
 import ProText from "components/ProText";
@@ -83,18 +84,7 @@ function MenuPage() {
               width={"100%"}
               preview={false}
             />
-            <div className={styles.leftShape}></div>
-            <div className={styles.rightShape}></div>
-            {/* <ResponsiveServices
-              orderType={orderType}
-              translations={{
-                common: {
-                  dineIn: translations.common?.dineIn || "Dine In",
-                  pickup: translations.common?.pickup || "Pickup",
-                  more: translations.common?.more || "More",
-                },
-              }}
-            /> */}
+            <LogoContainerIcon className={styles.logoContainerIcon} />
             <div
               className={`${styles.headerFloatingBtn} ${styles.backButtonContainer}`}
             >