Initial commit

src/layouts/app/hooks/useHeaderMenu.tsx

@@ -0,0 +1,90 @@
+import {
+  BgColorsOutlined,
+  HomeOutlined,
+  LoginOutlined,
+  MenuOutlined,
+  TranslationOutlined,
+} from "@ant-design/icons";
+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";
+
+export default function useHeaderMenu() {
+  const { id } = useParams();
+  const dispatch = useAppDispatch();
+  const { t } = useTranslation();
+  const { isRTL } = useAppSelector((state) => state.locale);
+  const { themeName } = useAppSelector((state) => state.theme);
+  const navigate = useNavigate();
+
+  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={`/${id}/orders`}>{t("common.myOrder")}</Link>,
+      onClick: () => {
+        navigate(`/${id}/orders`);
+      },
+    },
+    {
+      key: "branches",
+      icon: (
+        <MenuOutlined
+          style={{ color: themeName === "dark" ? "white" : "#1f2937" }}
+        />
+      ),
+      label: <Link to={`/${id}/menu`}>{t("common.branches")}</Link>,
+    },
+    {
+      key: "login",
+      icon: (
+        <LoginOutlined
+          style={{ color: themeName === "dark" ? "white" : "#1f2937" }}
+        />
+      ),
+      label: <Link to={`/${id}/login`}>{t("common.login")}</Link>,
+      onClick: () => {
+        navigate(`/${id}/login`);
+      },
+    },
+  ];
+  return { menuItems };
+}