school-dashboard-exercise/src/Layout/Ui/SideBar.tsx
2024-08-07 16:37:27 +03:00

57 lines
1.6 KiB
TypeScript

import React from "react";
import { Divider } from "antd";
import { useLocation, useNavigate } from "react-router-dom";
import { menuItems } from "../../Routes";
import { MdLogout } from "react-icons/md";
import useAuthState from "../../zustand/AuthState";
import { hasAbility } from "../../utils/hasAbility";
import { useTranslation } from "react-i18next";
import { getLocalStorage } from "../../utils/LocalStorage";
import { BRANCH_OBJECT_KEY } from "../../config/AppKey";
import { MenuItem } from "../../Components/Layout/SideBar/MenuItem";
const SideBar = () => {
const location = useLocation();
const navigate = useNavigate();
const { logout } = useAuthState();
const [t] = useTranslation();
const branch_name = getLocalStorage(BRANCH_OBJECT_KEY)?.name;
return (
<div className="side_bar">
<h1>
{/* {t("sidebar.dashboard")} */}
{branch_name}{" "}
</h1>
<Divider />
<div className="side_bar_links">
{menuItems.map((item, index) => {
const useAbility = hasAbility(item.abilities, item.abilities_value);
if (!useAbility) {
return <React.Fragment key={index}></React.Fragment>;
}
return (
<MenuItem
key={index}
item={item}
location={location}
index={index}
/>
);
})}
</div>
<button
onClick={() => {
logout();
navigate("/auth");
}}
>
<MdLogout /> {t("sidebar.logout")}
</button>
</div>
);
};
export default SideBar;