89 lines
2.7 KiB
TypeScript
89 lines
2.7 KiB
TypeScript
import React, { useState } 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";
|
|
import { CiMenuBurger, CiSettings } from "react-icons/ci";
|
|
import { IoIosMenu } from "react-icons/io";
|
|
import { HiMenuAlt2, HiMenuAlt3 } from "react-icons/hi";
|
|
import { RoleByType } from "../../utils/RoleByType";
|
|
import { useFilterStateState } from "../../zustand/Filter";
|
|
|
|
const SideBar = ({
|
|
isOpen,
|
|
setIsOpen,
|
|
}: {
|
|
isOpen: boolean;
|
|
setIsOpen: any;
|
|
}) => {
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
const { logout } = useAuthState();
|
|
const [t] = useTranslation();
|
|
|
|
const toggleSidebar = () => {
|
|
setIsOpen((prev: boolean) => (prev === true ? false : true));
|
|
};
|
|
|
|
return (
|
|
<div className={isOpen ? "side_bar" : "side_bar side_bar_closed"}>
|
|
<div className="side_bar_header">
|
|
<img src={isOpen ? "/App/Logo.png" : "/App/Logo2.png"} alt="" />
|
|
<HiMenuAlt3 onClick={toggleSidebar} />
|
|
</div>
|
|
{/* <Divider /> */}
|
|
<HiMenuAlt2
|
|
className="side_bar_close_menu"
|
|
style={isOpen ? { display: "none" } : { display: "inline" }}
|
|
onClick={toggleSidebar}
|
|
/>
|
|
<div className="side_bar_links">
|
|
<p>{t("sidebar.main_menu")}</p>
|
|
{menuItems.map((item, index) => {
|
|
const useAbility = hasAbility(item.abilities, item.abilities_value);
|
|
if (!useAbility) {
|
|
return <React.Fragment key={index}></React.Fragment>;
|
|
}
|
|
if (!RoleByType(item)) {
|
|
return <React.Fragment key={index}></React.Fragment>;
|
|
}
|
|
return (
|
|
<MenuItem
|
|
key={index}
|
|
item={item}
|
|
location={location}
|
|
index={index}
|
|
isOpen={isOpen}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
<div className="side_bar_setting">
|
|
<p>{t("sidebar.setting")}</p>
|
|
<div onClick={() => {navigate("/setting")}}>
|
|
<CiSettings />
|
|
<span>{t("sidebar.setting")}</span>
|
|
</div>
|
|
<div
|
|
className="logout_button"
|
|
onClick={() => {
|
|
logout();
|
|
navigate("/auth");
|
|
}}
|
|
>
|
|
<MdLogout />
|
|
<span>{t("sidebar.logout")}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SideBar;
|