menu drawer: update list

2026-01-13 04:33:06 +03:00
parent 2b0516ad0d
commit 69bc9d4dee
9 changed files with 219 additions and 46 deletions
--- a/src/assets/locals/ar.json
+++ b/src/assets/locals/ar.json
@@ -76,7 +76,8 @@
    "room": "الغرفة",
    "office": "المكتب",
    "booking": "الحجز",
-    "scheduledOrder": "الطلب المجدول"
+    "scheduledOrder": "الطلب المجدول",
+    "loyaltyAndReward": "المكافأة واللايفور"
  },
  "home": {
    "title": "العنوان",
--- a/src/assets/locals/en.json
+++ b/src/assets/locals/en.json
@@ -76,7 +76,8 @@
    "noMenuItemsAvailable": "No menu items available",
    "restaurantCover": "Restaurant Cover",
    "restaurantLogo": "Restaurant Logo",
-    "scheduledOrder": "Scheduled Order"
+    "scheduledOrder": "Scheduled Order",
+    "loyaltyAndReward": "Rewards And Loyalty"
  },
  "home": {
    "title": "title",
--- a/src/components/Icons/BranchesIcon.tsx
+++ b/src/components/Icons/BranchesIcon.tsx
@@ -0,0 +1,63 @@
+interface BranchesIconType {
+  className?: string;
+  onClick?: () => void;
+}
+
+const BranchesIcon = ({ className, onClick }: BranchesIconType) => {
+  return (
+    <svg
+      width="15"
+      height="16"
+      viewBox="0 0 15 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      onClick={onClick}
+    >
+      <path
+        d="M5.40234 3.18555C5.54014 2.593 6.04569 1.00063 7.49875 1.00063C8.95667 1.00063 9.4607 2.60361 9.59656 3.19141"
+        stroke="#333333"
+        stroke-miterlimit="10"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M12.7224 15H2.27935C1.70007 15 1.23047 14.5305 1.23047 13.9512V4.23958C1.23047 3.66035 1.70007 3.19075 2.27935 3.19075H12.7224C13.3017 3.19075 13.7713 3.66035 13.7713 4.23958V13.9512C13.7713 14.5305 13.3017 15 12.7224 15Z"
+        stroke="#333333"
+        stroke-miterlimit="10"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M10.4466 8.39983C10.7649 8.92011 10.9482 9.53128 10.9482 10.1851V10.6016H4.05078V10.1851C4.05078 8.2877 5.59476 6.74955 7.4995 6.74955C8.09085 6.74955 8.64745 6.8978 9.13388 7.15906"
+        stroke="#333333"
+        stroke-miterlimit="10"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M2.90234 10.6016H12.0989"
+        stroke="#333333"
+        stroke-miterlimit="10"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M7.5 6.75V5.94196"
+        stroke="#333333"
+        stroke-miterlimit="10"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M10.6209 12.0625H4.37929C4.18146 12.0625 4.0038 11.9419 3.93143 11.7585L3.47656 10.605H11.5236L11.0687 11.7585C10.9964 11.9419 10.8187 12.0625 10.6209 12.0625Z"
+        stroke="#333333"
+        stroke-miterlimit="10"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default BranchesIcon;
--- a/src/components/Icons/LoginIcon.tsx
+++ b/src/components/Icons/LoginIcon.tsx
@@ -0,0 +1,27 @@
+interface LoginIconType {
+  className?: string;
+  onClick?: () => void;
+}
+
+const LoginIcon = ({ className, onClick }: LoginIconType) => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      onClick={onClick}
+    >
+      <path
+        d="M10 2H10.8C11.9201 2 12.4802 2 12.908 2.21799C13.2843 2.40973 13.5903 2.71569 13.782 3.09202C14 3.51984 14 4.0799 14 5.2V10.8C14 11.9201 14 12.4802 13.782 12.908C13.5903 13.2843 13.2843 13.5903 12.908 13.782C12.4802 14 11.9201 14 10.8 14H10M6.66667 4.66667L10 8M10 8L6.66667 11.3333M10 8L2 8"
+        stroke="#333333"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default LoginIcon;
--- a/src/components/Icons/LoyaltyAndRewardIcon.tsx
+++ b/src/components/Icons/LoyaltyAndRewardIcon.tsx
@@ -0,0 +1,37 @@
+interface LoyaltyAndRewardIconType {
+  className?: string;
+  onClick?: () => void;
+  color?: string
+}
+
+const LoyaltyAndRewardIcon = ({ className, onClick, color }: LoyaltyAndRewardIconType) => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      onClick={onClick}
+    >
+      <path
+        d="M1.33203 7.9987C1.33203 5.32736 1.33203 3.99203 2.11336 3.16203C2.8947 2.33203 4.15136 2.33203 6.66536 2.33203H9.33203C11.846 2.33203 13.1034 2.33203 13.884 3.16203C14.6647 3.99203 14.6654 5.32736 14.6654 7.9987C14.6654 10.67 14.6654 12.0054 13.884 12.8354C13.1027 13.6654 11.846 13.6654 9.33203 13.6654H6.66536C4.15136 13.6654 2.89403 13.6654 2.11336 12.8354C1.3327 12.0054 1.33203 10.67 1.33203 7.9987Z"
+        stroke={color || "#333333"}
+      />
+      <path
+        d="M4.59189 7.22074C5.21789 6.85541 5.76389 7.00274 6.09189 7.23741C6.22655 7.33341 6.29389 7.38141 6.33322 7.38141C6.37322 7.38141 6.43989 7.33341 6.57455 7.23741C6.90255 7.00274 7.44855 6.85541 8.07455 7.22074C8.89589 7.70074 9.08122 9.28341 7.18789 10.6187C6.82655 10.8727 6.64589 11.0001 6.33322 11.0001C6.02055 11.0001 5.83989 10.8734 5.47922 10.6187C3.58522 9.28341 3.76989 7.70074 4.59189 7.22074Z"
+        stroke={color || "#333333"}
+        strokeLinecap="round"
+      />
+      <path
+        d="M12 11H10"
+        stroke={color || "#333333"}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default LoyaltyAndRewardIcon;
--- a/src/components/Icons/MyOrderIcon.tsx
+++ b/src/components/Icons/MyOrderIcon.tsx
@@ -0,0 +1,27 @@
+interface MyOrderIconType {
+  className?: string;
+  onClick?: () => void;
+}
+
+const MyOrderIcon = ({ className, onClick }: MyOrderIconType) => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      onClick={onClick}
+    >
+      <path
+        d="M10.6656 5.9987V3.9987C10.6656 2.52594 9.4717 1.33203 7.99894 1.33203C6.52618 1.33203 5.33228 2.52594 5.33228 3.9987V5.9987M2.39361 6.90001L1.99361 11.1667C1.87988 12.3798 1.82302 12.9864 2.02431 13.4549C2.20114 13.8665 2.51102 14.2067 2.90429 14.4212C3.35196 14.6654 3.96119 14.6654 5.17964 14.6654H10.8182C12.0367 14.6654 12.6459 14.6654 13.0936 14.4212C13.4869 14.2067 13.7967 13.8665 13.9736 13.4549C14.1749 12.9864 14.118 12.3798 14.0043 11.1667L13.6043 6.90001C13.5082 5.8756 13.4602 5.36339 13.2298 4.97614C13.0269 4.63509 12.7272 4.36211 12.3687 4.19193C11.9616 3.9987 11.4472 3.9987 10.4182 3.9987L5.57964 3.9987C4.55074 3.9987 4.03628 3.9987 3.62922 4.19193C3.27072 4.3621 2.97095 4.63509 2.76805 4.97614C2.53767 5.36339 2.48965 5.87559 2.39361 6.90001Z"
+        stroke="#333333"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default MyOrderIcon;
--- a/src/components/LanguageSwitch/LanguageSwitch.tsx
+++ b/src/components/LanguageSwitch/LanguageSwitch.tsx
@@ -1,4 +1,4 @@
-import { GlobalOutlined, ShakeOutlined } from "@ant-design/icons";
+import { GlobalOutlined } from "@ant-design/icons";
 import { setLocale, setLocalesThunk } from "features/locale/localeSlice";
 import i18n from "i18n/i18n";
 import { useTransition } from "react";
--- a/src/layouts/app/HeaderMenuDrawer.tsx
+++ b/src/layouts/app/HeaderMenuDrawer.tsx
@@ -71,7 +71,7 @@ export default function HeaderMenuDrawer() {
        open={mobileMenuOpen}
        styles={{
          body: {
-          padding: 0,
+            padding: 0,
          },
          header: {
            padding: "5px 24px",
@@ -122,7 +122,18 @@ export default function HeaderMenuDrawer() {
                    style={mobileMenuLinkStyle(locale === item.key)}
                  >
                    {item.icon}
-                    <ProText>{item.label.props.children}</ProText>
+                    <ProText
+                      style={{
+                        fontWeight: 500,
+                        fontStyle: "Medium",
+                        fontSize: 12,
+                        lineHeight: "140%",
+                        letterSpacing: 0,
+                        color: "#333333",
+                      }}
+                    >
+                      {item.label.props.children}
+                    </ProText>
                  </div>
                </div>
              ))}
--- a/src/layouts/app/hooks/useHeaderMenu.tsx
+++ b/src/layouts/app/hooks/useHeaderMenu.tsx
@@ -1,11 +1,12 @@
 import {
-    BgColorsOutlined,
-    HomeOutlined,
-    LoginOutlined,
-    LogoutOutlined,
-    MenuOutlined,
-    TranslationOutlined,
+  BgColorsOutlined,
+  GlobalOutlined,
+  LogoutOutlined,
 } from "@ant-design/icons";
+import BranchesIcon from "components/Icons/BranchesIcon";
+import LoginIcon from "components/Icons/LoginIcon";
+import LoyaltyAndRewardIcon from "components/Icons/LoyaltyAndRewardIcon";
+import MyOrderIcon from "components/Icons/MyOrderIcon";
 import { logoutThunk } from "features/auth/authSlice";
 import { setLocale, setLocalesThunk } from "features/locale/localeSlice";
 import { toggleTheme } from "features/theme/themeSlice";
@@ -28,7 +29,7 @@ export default function useHeaderMenu() {
    {
      key: "language",
      icon: (
-        <TranslationOutlined
+        <GlobalOutlined
          style={{ color: themeName === "dark" ? "white" : "#1f2937" }}
        />
      ),
@@ -58,49 +59,54 @@ export default function useHeaderMenu() {
    },
    {
      key: "orders",
-      icon: (
-        <HomeOutlined
-          style={{ color: themeName === "dark" ? "white" : "#1f2937" }}
-        />
-      ),
+      icon: <MyOrderIcon />,
      label: <Link to={`/${subdomain}/orders`}>{t("common.myOrder")}</Link>,
      onClick: () => {
        navigate(`/${subdomain}/orders`);
      },
    },
    {
-      key: "branches",
-      icon: (
-        <MenuOutlined
-          style={{ color: themeName === "dark" ? "white" : "#1f2937" }}
-        />
+      key: "loyalty",
+      icon: <LoyaltyAndRewardIcon />,
+      label: (
+        <Link to={`/${subdomain}/loyalty-and-rewards`}>
+          {t("common.loyaltyAndReward")}
+        </Link>
      ),
+    },
+    {
+      key: "branches",
+      icon: <BranchesIcon />,
      label: <Link to={`/${subdomain}/menu`}>{t("common.branches")}</Link>,
    },
-    ...(!token ? [{
-      key: "login",
-      icon: (
-        <LoginOutlined
-          style={{ color: themeName === "dark" ? "white" : "#1f2937" }}
-        />
-      ),
-      label: <Link to={`/${subdomain}/login`}>{t("common.login")}</Link>,
-      onClick: () => {
-        navigate(`/${subdomain}/login`);
-      },
-      }] : []),
-    ...(token ? [{
-      key: "logout",
-      icon: (
-        <LogoutOutlined
-          style={{ color: themeName === "dark" ? "white" : "#1f2937" }}
-        />
-      ),
-      label: <div>{t("common.logout")}</div>,
-      onClick: () => {
-        dispatch(logoutThunk());
-      },
-    }] : []),
+    ...(!token
+      ? [
+          {
+            key: "login",
+            icon: <LoginIcon />,
+            label: <Link to={`/${subdomain}/login`}>{t("common.login")}</Link>,
+            onClick: () => {
+              navigate(`/${subdomain}/login`);
+            },
+          },
+        ]
+      : []),
+    ...(token
+      ? [
+          {
+            key: "logout",
+            icon: (
+              <LogoutOutlined
+                style={{ color: themeName === "dark" ? "white" : "#1f2937" }}
+              />
+            ),
+            label: <div>{t("common.logout")}</div>,
+            onClick: () => {
+              dispatch(logoutThunk());
+            },
+          },
+        ]
+      : []),
  ];
  return { menuItems };
 }