update theme variables

src/layouts/app/HeaderMenuDrawer.tsx

@@ -4,19 +4,20 @@ import BackIcon from "components/Icons/BackIcon";
 import NextIcon from "components/Icons/NextIcon";
 import ProText from "components/ProText";
 import { useState } from "react";
+import { useGetMenuQuery } from "redux/api/others";
 import { useAppSelector } from "redux/hooks";
-import { componentBackground, darkComponentBackground } from "ThemeConstants";
+import { darkColors, lightColors } from "ThemeConstants";
 import useHeaderMenu from "./hooks/useHeaderMenu";
 
-const {useBreakpoint} = Grid;
+const { useBreakpoint } = Grid;
 
 export default function HeaderMenuDrawer() {
   const { isRTL, locale } = useAppSelector((state) => state.locale);
-  const {themeName} = useAppSelector(state => state.theme)
+  const { themeName } = useAppSelector((state) => state.theme);
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const { menuItems } = useHeaderMenu();
-  const {xs } = useBreakpoint();
-  const isMobile = xs
+  const { xs } = useBreakpoint();
+  const isMobile = xs;
   const closeMobileMenu = () => setMobileMenuOpen(false);
 
   const mobileMenuLinkStyle = (isActive: boolean): React.CSSProperties => ({
@@ -43,30 +44,42 @@ export default function HeaderMenuDrawer() {
     backgroundColor: "none",
   };
 
+  const { restaurant } = useAppSelector((state) => state.order);
+
+  const { isLoading: isLoadingMenu } = useGetMenuQuery(
+    restaurant?.restautantId,
+    {
+      skip: !restaurant?.restautantId,
+    },
+  );
   return (
     <>
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "space-between",
-          position: "fixed",
-          zIndex: 999,
-          [isRTL ? "left" : "right"]: 0,
-          top: "30%",
-          backgroundColor: themeName === "dark" ? darkComponentBackground : componentBackground,
-          [isRTL ? "borderTopRightRadius" : "borderTopLeftRadius"]: 10,
-          [isRTL ? "borderBottomRightRadius" : "borderBottomLeftRadius"]: 10,
-          border:
-            themeName === "dark" ? "1px solid #374151" : "1px solid #FDF1D9",
-        }}
-      >
-        <Button
-          type="text"
-          icon={isRTL ? <NextIcon /> : <BackIcon />}
-          onClick={() => setMobileMenuOpen(true)}
-          style={actionButtonStyle}
-        />
-      </div>
+      {!isLoadingMenu && (
+        <div
+          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: "1px solid #E9E9E9",
+          }}
+        >
+          <Button
+            type="text"
+            icon={isRTL ? <NextIcon /> : <BackIcon />}
+            onClick={() => setMobileMenuOpen(true)}
+            style={actionButtonStyle}
+          />
+        </div>
+      )}
       <Drawer
         placement={isRTL ? "left" : "right"}
         maskClosable={false}