menu drawer: update list

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>
               ))}

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 };
 }