118 lines
3.3 KiB
TypeScript
118 lines
3.3 KiB
TypeScript
import {
|
|
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 { clearCart } from "features/order/orderSlice";
|
|
import { toggleTheme } from "features/theme/themeSlice";
|
|
import i18n from "i18n/i18n";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Link, useNavigate, useParams } from "react-router-dom";
|
|
import { useAppDispatch, useAppSelector } from "redux/hooks";
|
|
import { ACCESS_TOKEN } from "utils/constants";
|
|
|
|
export default function useHeaderMenu() {
|
|
const { subdomain } = useParams();
|
|
const dispatch = useAppDispatch();
|
|
const { t } = useTranslation();
|
|
const { isRTL } = useAppSelector((state) => state.locale);
|
|
const { themeName } = useAppSelector((state) => state.theme);
|
|
const navigate = useNavigate();
|
|
const token = localStorage.getItem(ACCESS_TOKEN);
|
|
|
|
const menuItems = [
|
|
{
|
|
key: "language",
|
|
icon: (
|
|
<GlobalOutlined
|
|
style={{ color: themeName === "dark" ? "white" : "#1f2937" }}
|
|
/>
|
|
),
|
|
label: <div>{isRTL ? t("common.arabic") : t("common.english")}</div>,
|
|
onClick: () => {
|
|
const key = isRTL ? "en" : "ar";
|
|
dispatch(setLocale(key));
|
|
dispatch(setLocalesThunk(key));
|
|
i18n.changeLanguage(key);
|
|
},
|
|
},
|
|
{
|
|
key: "theme",
|
|
icon: (
|
|
<BgColorsOutlined
|
|
style={{ color: themeName === "dark" ? "white" : "#1f2937" }}
|
|
/>
|
|
),
|
|
label: (
|
|
<div>
|
|
{themeName === "light" ? t("common.dark") : t("common.light")}
|
|
</div>
|
|
),
|
|
onClick: () => {
|
|
dispatch(toggleTheme());
|
|
},
|
|
},
|
|
{
|
|
key: "orders",
|
|
icon: <MyOrderIcon />,
|
|
label: <Link to={`/${subdomain}/orders`}>{t("common.myOrder")}</Link>,
|
|
onClick: () => {
|
|
navigate(`/${subdomain}/orders`);
|
|
},
|
|
},
|
|
{
|
|
key: "rewardsAndLoyalty",
|
|
icon: <LoyaltyAndRewardIcon />,
|
|
label: (
|
|
<Link to={`/${subdomain}/rewards-and-loyalty`}>
|
|
{t("common.rewardsAndLoyalty")}
|
|
</Link>
|
|
),
|
|
onClick: () => {
|
|
navigate(`/${subdomain}/rewards-and-loyalty`);
|
|
},
|
|
},
|
|
{
|
|
key: "branches",
|
|
icon: <BranchesIcon />,
|
|
label: <Link to={`/${subdomain}/menu`}>{t("common.branches")}</Link>,
|
|
},
|
|
...(!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());
|
|
dispatch(clearCart());
|
|
},
|
|
},
|
|
]
|
|
: []),
|
|
];
|
|
return { menuItems };
|
|
}
|