fix logo container in tablet and desktop size

src/layouts/app/HeaderMenuDrawer.tsx

@@ -6,8 +6,8 @@ import ProText from "components/ProText";
 import { useState } from "react";
 import { useGetMenuQuery } from "redux/api/others";
 import { useAppSelector } from "redux/hooks";
-import { darkColors, lightColors } from "ThemeConstants";
 import useHeaderMenu from "./hooks/useHeaderMenu";
+import "./styles.css";
 
 const { useBreakpoint } = Grid;
 
@@ -55,26 +55,7 @@ export default function HeaderMenuDrawer() {
   return (
     <>
       {!isLoadingMenu && (
-        <div
+        <div className="header-floating-btn">
-          style={{
-            display: "flex",
-            justifyContent: "space-between",
-            position: "fixed",
-            zIndex: 999,
-            [isRTL ? "left" : "right"]: 0,
-            top: 220,
-            backgroundColor:
-              themeName === "dark"
-                ? darkColors.secondaryBgColor
-                : lightColors.secondaryBgColor,
-            [isRTL ? "borderTopRightRadius" : "borderTopLeftRadius"]: 10,
-            [isRTL ? "borderBottomRightRadius" : "borderBottomLeftRadius"]: 10,
-            border:
-              themeName === "dark"
-                ? "1px solid var(--border)"
-                : "1px solid var(--border)",
-          }}
-        >
           <Button
             type="text"
             icon={isRTL ? <NextIcon /> : <BackIcon />}

src/layouts/app/styles.css

@@ -113,3 +113,73 @@
 :where(.darkApp) .user-icon {
   background: var(--primary-dark);
 }
+
+.header-floating-btn {
+  display: flex;
+  justify-content: space-between;
+  position: fixed;
+  z-index: 999;
+  right: 0;
+  top: 220px;
+  background-color: var(--secondary-background);
+  border-top-left-radius: 10px;
+  border-bottom-left-radius: 10px;
+  border: 1px solid var(--border);
+}
+
+:where(.ant-app-rtl) .header-floating-btn {
+  left: 0;
+  right: auto;
+  border-top-right-radius: 10px;
+  border-bottom-right-radius: 10px;
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+
+@media (min-width: 769px) and (max-width: 1024px) {
+  .header-floating-btn {
+    display: flex;
+    justify-content: space-between;
+    position: fixed;
+    z-index: 999;
+    right: 0;
+    top: 250px;
+    background-color: var(--secondary-background);
+    border-top-left-radius: 10px;
+    border-bottom-left-radius: 10px;
+    border: 1px solid var(--border);
+  }
+  :where(.ant-app-rtl) .header-floating-btn {
+    left: 0;
+    right: auto;
+    border-top-right-radius: 10px;
+    border-bottom-right-radius: 10px;
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px;
+  }
+}
+
+/* Desktop devices (min-width: 1025px) */
+@media (min-width: 1025px) {
+  .header-floating-btn {
+    display: flex;
+    justify-content: space-between;
+    position: fixed;
+    z-index: 999;
+    right: 0;
+    top: 270px;
+    background-color: var(--secondary-background);
+    border-top-left-radius: 10px;
+    border-bottom-left-radius: 10px;
+    border: 1px solid var(--border);
+  }
+
+  :where(.ant-app-rtl) .header-floating-btn {
+    left: 0;
+    right: auto;
+    border-top-right-radius: 10px;
+    border-bottom-right-radius: 10px;
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px;
+  }
+}

src/pages/menu/components/MenuSkeleton/MenuSkeleton.module.css

@@ -38,19 +38,18 @@
 }
 
 .logoContainerIcon {
-  position: absolute;
+  position: absolute !important;
-  left: 0 !important;
+  left: 0px !important;
-  top: 127px !important;
+  top: 127px;
   z-index: 10 !important;
 }
 
-
 :global(.ant-app-rtl) .logo {
   right: 19px;
 }
 
 :global(.ant-app-rtl) .logoContainerIcon {
-  right: -10px;
+  right: -10px !important;
 }
 
 /* Menu Section Styles */
@@ -225,8 +224,22 @@
 @media (min-width: 769px) and (max-width: 1024px) {
   .logo {
     left: 40px;
-    width: 80px;
+    width: 80px !important;
-    height: 80px;
+    height: 80px !important;
+    top: 142px !important;
+  }
+
+  .logoContainerIcon {
+    position: absolute !important;
+    left: 0px !important;
+    top: 133px;
+    z-index: 10 !important;
+    width: 140px !important;
+    height: 100px !important;
+  }
+
+  :global(.ant-app-rtl) .logoContainerIcon {
+    right: -17px !important;
   }
 
   .categoriesContainer {
@@ -299,11 +312,28 @@
 @media (min-width: 1025px) {
   .logo {
     left: 33px;
-    top: 141px;
+    top: 114px !important;
     width: 150px !important;
     height: 150px !important;
   }
 
+  :global(.ant-app-rtl) .logo {
+    right: 28px !important;
+  }
+
+  .logoContainerIcon {
+    position: absolute !important;
+    left: 0px !important;
+    top: 106px;
+    z-index: 10 !important;
+    width: 247px !important;
+    height: 170px !important;
+  }
+
+  :global(.ant-app-rtl) .logoContainerIcon {
+    right: -30px !important;
+  }
+
   .categoriesContainer {
     height: 180px;
     padding: 0 24px;

src/pages/menu/components/MenuSkeleton/MenuSkeleton.tsx

@@ -120,7 +120,7 @@ const MenuSkeleton = ({
         {/* Logo Skeleton */}
         <LogoContainerIcon className={styles.logoContainerIcon} />
         <div className={styles.logo}>
-          <Skeleton.Image active />
+          <Skeleton.Image active style={{ width: 160, height: 160 }} />
         </div>
       </div>
       <div className={`${styles.pageContainer} ${styles.skeletonContainer}`}>

src/pages/menu/menu.module.css

@@ -18,35 +18,6 @@
   margin-bottom: 24px;
 } */
 
-.leftShape {
-  position: absolute;
-  top: 133px;
-  width: 47px;
-  height: 50px;
-  left: -11px;
-  background-color: var(--background); /* Color of the shape */
-  clip-path: path("M 0 53 Q 50 50, 50 0 Q 50 50, 100 100 L 0 100 Z");
-}
-
-:global(.darkApp) .leftShape {
-  background-color: var(--background);
-}
-
-.rightShape {
-  position: absolute;
-  top: 133px;
-  width: 47px;
-  height: 50px;
-  left: 102px;
-  background-color: var(--background); /* Color of the shape */
-  clip-path: path("M 0 53 Q 50 50, 50 0 Q 50 50, 100 100 L 0 100 Z");
-  transform: scale(-1, 1); /* Mirror the shape on the Y-axis */
-}
-
-:global(.darkApp) .rightShape {
-  background-color: var(--background);
-}
-
 .logo {
   position: absolute;
   left: 19px;
@@ -71,6 +42,23 @@
   right: 19px;
 }
 
+.logoContainerIcon {
+  position: absolute !important;
+  left: 0px !important;
+  top: 127px;
+  z-index: 10 !important;
+}
+
+:global(.ant-app-rtl) .logoContainerIcon {
+  right: -10px !important;
+}
+
+.timeIcon {
+  position: relative;
+  top: 4px;
+  margin: 0 4px;
+}
+
 .services {
   height: 36px;
   position: absolute;
@@ -483,6 +471,11 @@
   color: #666;
 }
 
+:global(.ant-app-rtl) .openingHours {
+  left: 10px;
+  right: auto;
+}
+
 .restaurantTitle {
   font-size: 16px;
   font-weight: bold;
@@ -558,7 +551,8 @@
   }
 
   .logo {
-    left: 40px;
+    top: -73px;
+    left: 24px;
     width: 80px !important;
     height: 80px !important;
   }
@@ -574,14 +568,17 @@
     border-radius: 0 0 20px 20px;
   }
 
-  .leftShape {
+  .logoContainerIcon {
-    top: 171px;
+    position: absolute !important;
-    left: -3px;
+    left: 0px !important;
+    top: 133px;
+    z-index: 10 !important;
+    width: 140px !important;
+    height: 100px !important;
   }
 
-  .rightShape {
+  :global(.ant-app-rtl) .logoContainerIcon {
-    top: 171px;
+    right: -17px !important;
-    left: 116px;
   }
 
   .pageContainer {
@@ -603,6 +600,20 @@
   .contentWrapper {
     margin-top: 16px;
   }
+
+  .openingHours {
+    position: absolute;
+    top: 210px;
+    right: 16px;
+    font-size: 14px;
+    font-weight: 600;
+    color: #666;
+  }
+
+  :global(.ant-app-rtl) .openingHours {
+    left: 16px;
+    right: auto;
+  }
 }
 
 /* Desktop devices (min-width: 1025px) */
@@ -628,29 +639,50 @@
 
   .logo {
     position: absolute;
-    left: 33px;
+    left: 38px;
-    top: -95px;
+    top: -122px;
     border-radius: 50%;
-    z-index: 10;
+    z-index: 11;
     border: 3px solid var(--background);
     width: 150px !important;
     height: 150px !important;
   }
 
+  :global(.ant-app-rtl) .logo {
+    right: 28px;
+  }
+
   .navButton {
     width: 48px !important;
     height: 48px !important;
     border-radius: 16px !important;
   }
 
-  .leftShape {
+  .logoContainerIcon {
-    top: 171px;
+    position: absolute !important;
-    left: -10px;
+    left: 0px !important;
+    top: 106px;
+    z-index: 10 !important;
+    width: 247px !important;
+    height: 170px !important;
   }
 
-  .rightShape {
+  :global(.ant-app-rtl) .logoContainerIcon {
-    top: 171px;
+    right: -30px !important;
-    left: 179px;
+  }
+
+  .openingHours {
+    position: absolute;
+    top: 230px;
+    right: 16px;
+    font-size: 14px;
+    font-weight: 600;
+    color: #666;
+  }
+
+  :global(.ant-app-rtl) .openingHours {
+    left: 32px;
+    right: auto;
   }
 }
 
@@ -690,26 +722,3 @@
     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;
-}
-
-:global(.ant-app-rtl) .openingHours {
-  left: 10px;
-  right: auto;
-}
-
-.timeIcon {
-  position: relative;
-  top: 4px;
-  margin: 0 4px;
-}
-