1  import { Fragment } from "react";
 2  import { useTranslation } from "react-i18next";
 3  import { CustomButton } from "@components/Button";
 4  import history from "@pages/history";
 5  import { CONTACTS, HOME } from "@pages/paths";
 6  import { AssetHook } from "@pages/home/hooks/assetHook";
 7  import { useContacts } from "@pages/contacts/hooks/contactsHook";
 8  
 9  const Menu = () => {
10    const { t } = useTranslation();
11  
12    const { assets, assetLoading } = AssetHook();
13    const { contacts } = useContacts();
14  
15    const menuList = [
16      {
17        name: "Assets",
18        path: HOME,
19        label: `${
20          assets?.length !== 1 ? t("assets") : t("asset")
21        } (${assets?.length})`,
22      },
23      {
24        name: "Contacts",
25        path: CONTACTS,
26        label: `${
27          assets?.length !== 1 ? t("contacts") : t("contact")
28        } (${contacts?.length})`,
29      },
30    ];
31  
32    return (
33      <Fragment>
34        <div className="flex flex-row gap-3 justify-start items-center w-full">
35          {menuList.map((menu, k) => (
36            <CustomButton
37              key={k}
38              size={"small"}
39              intent={"noBG"}
40              border={"underline"}
41              className="flex flex-row justify-start items-center mb-4"
42              onClick={() => {
43                if (window.location.pathname !== menu.path) {
44                  history.push(menu.path);
45                }
46              }}
47            >
48              <p
49                className={`!font-normal  mr-2 ${
50                  window.location.pathname !== menu.path
51                    ? " text-PrimaryTextColorLight/60 dark:text-PrimaryTextColor/60"
52                    : "border-b border-SelectRowColor"
53                }`}
54              >
55                {menu.label}
56              </p>
57            </CustomButton>
58          ))}
59          {assetLoading && (
60            <div className=" mt-[-1rem] inline-block w-4 h-4 after:block after:w-4 after:h-4 after:rounded-[50%] after:border-[0.2rem] after:border-t-SelectRowColor after:border-b-SelectRowColor after:border-r-transparent after:border-l-transparent lds-dual-ring"></div>
61          )}
62        </div>
63      </Fragment>
64    );
65  };
66  
67  export default Menu;