some UX

src/layouts/app/hooks/useHeaderMenu.tsx

@@ -2,15 +2,18 @@ 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 { id } = useParams();
@@ -19,6 +22,7 @@ export default function useHeaderMenu() {
   const { isRTL } = useAppSelector((state) => state.locale);
   const { themeName } = useAppSelector((state) => state.theme);
   const navigate = useNavigate();
+  const token = localStorage.getItem(ACCESS_TOKEN);
 
   const menuItems = [
     {
@@ -73,7 +77,7 @@ export default function useHeaderMenu() {
       ),
       label: <Link to={`/${id}/menu`}>{t("common.branches")}</Link>,
     },
-    {
+    ...(!token ? [{
       key: "login",
       icon: (
         <LoginOutlined
@@ -84,7 +88,19 @@ export default function useHeaderMenu() {
       onClick: () => {
         navigate(`/${id}/login`);
       },
-    },
+      }] : []),
+    ...(token ? [{
+      key: "logout",
+      icon: (
+        <LogoutOutlined
+          style={{ color: themeName === "dark" ? "white" : "#1f2937" }}
+        />
+      ),
+      label: <div>{t("common.logout")}</div>,
+      onClick: () => {
+        dispatch(logoutThunk());
+      },
+    }] : []),
   ];
   return { menuItems };
 }