diff --git a/src/assets/locals/ar.json b/src/assets/locals/ar.json index 1435555..221f328 100644 --- a/src/assets/locals/ar.json +++ b/src/assets/locals/ar.json @@ -76,7 +76,8 @@ "room": "الغرفة", "office": "المكتب", "booking": "الحجز", - "scheduledOrder": "الطلب المجدول" + "scheduledOrder": "الطلب المجدول", + "loyaltyAndReward": "المكافأة واللايفور" }, "home": { "title": "العنوان", diff --git a/src/assets/locals/en.json b/src/assets/locals/en.json index cd5ba13..b851658 100644 --- 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", diff --git a/src/components/Icons/BranchesIcon.tsx b/src/components/Icons/BranchesIcon.tsx new file mode 100644 index 0000000..5c54510 --- /dev/null +++ b/src/components/Icons/BranchesIcon.tsx @@ -0,0 +1,63 @@ +interface BranchesIconType { + className?: string; + onClick?: () => void; +} + +const BranchesIcon = ({ className, onClick }: BranchesIconType) => { + return ( + + + + + + + + + ); +}; + +export default BranchesIcon; diff --git a/src/components/Icons/LoginIcon.tsx b/src/components/Icons/LoginIcon.tsx new file mode 100644 index 0000000..2dde249 --- /dev/null +++ b/src/components/Icons/LoginIcon.tsx @@ -0,0 +1,27 @@ +interface LoginIconType { + className?: string; + onClick?: () => void; +} + +const LoginIcon = ({ className, onClick }: LoginIconType) => { + return ( + + + + ); +}; + +export default LoginIcon; diff --git a/src/components/Icons/LoyaltyAndRewardIcon.tsx b/src/components/Icons/LoyaltyAndRewardIcon.tsx new file mode 100644 index 0000000..2fbfa1d --- /dev/null +++ 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 ( + + + + + + ); +}; + +export default LoyaltyAndRewardIcon; diff --git a/src/components/Icons/MyOrderIcon.tsx b/src/components/Icons/MyOrderIcon.tsx new file mode 100644 index 0000000..76e4627 --- /dev/null +++ b/src/components/Icons/MyOrderIcon.tsx @@ -0,0 +1,27 @@ +interface MyOrderIconType { + className?: string; + onClick?: () => void; +} + +const MyOrderIcon = ({ className, onClick }: MyOrderIconType) => { + return ( + + + + ); +}; + +export default MyOrderIcon; diff --git a/src/components/LanguageSwitch/LanguageSwitch.tsx b/src/components/LanguageSwitch/LanguageSwitch.tsx index db1423c..5480301 100644 --- 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"; diff --git a/src/layouts/app/HeaderMenuDrawer.tsx b/src/layouts/app/HeaderMenuDrawer.tsx index d159ac0..dbf3f24 100644 --- 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} - {item.label.props.children} + + {item.label.props.children} + ))} diff --git a/src/layouts/app/hooks/useHeaderMenu.tsx b/src/layouts/app/hooks/useHeaderMenu.tsx index df28575..29e6bec 100644 --- 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: ( - ), @@ -58,49 +59,54 @@ export default function useHeaderMenu() { }, { key: "orders", - icon: ( - - ), + icon: , label: {t("common.myOrder")}, onClick: () => { navigate(`/${subdomain}/orders`); }, }, { - key: "branches", - icon: ( - + key: "loyalty", + icon: , + label: ( + + {t("common.loyaltyAndReward")} + ), + }, + { + key: "branches", + icon: , label: {t("common.branches")}, }, - ...(!token ? [{ - key: "login", - icon: ( - - ), - label: {t("common.login")}, - onClick: () => { - navigate(`/${subdomain}/login`); - }, - }] : []), - ...(token ? [{ - key: "logout", - icon: ( - - ), - label:
{t("common.logout")}
, - onClick: () => { - dispatch(logoutThunk()); - }, - }] : []), + ...(!token + ? [ + { + key: "login", + icon: , + label: {t("common.login")}, + onClick: () => { + navigate(`/${subdomain}/login`); + }, + }, + ] + : []), + ...(token + ? [ + { + key: "logout", + icon: ( + + ), + label:
{t("common.logout")}
, + onClick: () => { + dispatch(logoutThunk()); + }, + }, + ] + : []), ]; return { menuItems }; }