107 lines
2.9 KiB
TypeScript
107 lines
2.9 KiB
TypeScript
import {
|
|
BgColorsOutlined,
|
|
HomeOutlined,
|
|
LoginOutlined,
|
|
LogoutOutlined,
|
|
MenuOutlined,
|
|
TranslationOutlined,
|
|
} from "@ant-design/icons";
|
|
import { logoutThunk } from "features/auth/authSlice";
|
|
import { setLocale, setLocalesThunk } from "features/locale/localeSlice";
|
|
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: (
|
|
<TranslationOutlined
|
|
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: (
|
|
<HomeOutlined
|
|
style={{ color: themeName === "dark" ? "white" : "#1f2937" }}
|
|
/>
|
|
),
|
|
label: <Link to={`/${subdomain}/orders`}>{t("common.myOrder")}</Link>,
|
|
onClick: () => {
|
|
navigate(`/${subdomain}/orders`);
|
|
},
|
|
},
|
|
{
|
|
key: "branches",
|
|
icon: (
|
|
<MenuOutlined
|
|
style={{ color: themeName === "dark" ? "white" : "#1f2937" }}
|
|
/>
|
|
),
|
|
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());
|
|
},
|
|
}] : []),
|
|
];
|
|
return { menuItems };
|
|
}
|