ppob-frontend/src/pages/App/MenuList.js

import React, {useEffect, useState} from "react";
import {Menu} from "antd";
import {Link} from "react-router-dom";
import {
  AppstoreOutlined,
  DatabaseOutlined,
  FileProtectOutlined,
  HomeOutlined,
  MenuUnfoldOutlined,
  MoneyCollectOutlined,
  ProjectOutlined,
  FileProtectOutlined,
  FileAddOutlined,
  FileSyncOutlined,
  ProfileOutlined,
  UserOutlined,
} from "@ant-design/icons";
import {observer} from "mobx-react-lite";
import {useStore} from "../../utils/useStore";
import {LINKS} from "../../routes/app";

const {SubMenu} = Menu;

export const MenuList = observer((props) => {
  const store = useStore();
  useEffect(() => {
  }, []);

  const [setKeys, setSetKeys] = useState(["dashboard"]);

  return (
      <Menu
          defaultOpenKeys={["sub4"]}
          theme="light"
          style={{
            backgroundColor: "transparent",
            borderRightWidth: 0,
        fontWeight: 400,
        paddingLeft: 0,
      }}
      onClick={({ keyPath, item }) => {
        props.closeLeftDrawer();
      }}
      mode="inline"
      selectedKeys={setKeys}
      onSelect={({ setKeys, item, selectedKeys }) => setSetKeys(selectedKeys)}
      overflowedIndicator={0}
      forceSubMenuRender={true}
    >
      <Menu.Item key="home">
        <Link to={LINKS.HOME}>
          <HomeOutlined />
          <span>Home</span>
        </Link>
      </Menu.Item>
      {store.authentication.userData.role !== "Retail" && (
        <Menu.Item key="membership">
          <Link to={LINKS.MEMBERSHIP}>
            <FileProtectOutlined />
            <span>Membership</span>
          </Link>
        </Menu.Item>
      )}
      {store.authentication.userData.role !== "Retail" && (
        <SubMenu
          key="config"
          icon={<MenuUnfoldOutlined />}
          title="Config"
        >
          <Menu.Item key="partner">
            <Link to={LINKS.PARTNER}>
              <ProjectOutlined />
              <span>Partner</span>
            </Link>
          </Menu.Item>
          <Menu.Item key="commision">
            <Link to={LINKS.COMMISSION}>
              <MoneyCollectOutlined />
              <span>Commission</span>
            </Link>
          </Menu.Item>
          <Menu.Item key="supplier">
            <Link to={LINKS.SUPPLIER}>
              <AppstoreOutlined />
              <span>Supplier</span>
            </Link>
          </Menu.Item>
        </SubMenu>
      )}
      {store.authentication.userData.role !== "Retail" && (
        <SubMenu
        key="product"
        icon={<ProfileOutlined />}
        title="Product"
      >
        <Menu.Item key="product">
          <Link to={LINKS.PRODUCT}>
            <DatabaseOutlined />
            <span>Product</span>
          </Link>
        </Menu.Item>
        <Menu.Item key="product">
          <Link to={LINKS.CATEGORY}>
          <FileAddOutlined />
            <span>Category</span>
          </Link>
        </Menu.Item>
        <Menu.Item key="product">
          <Link to={LINKS.PRODUCT}>
          <FileSyncOutlined />
            <span>Sub Category</span>
          </Link>
        </Menu.Item>
        </SubMenu>
      )}
      {store.authentication.userData.role === ("Retail" || "Admin") && (
        <Menu.Item key="transaction">
          <Link to={LINKS.TRANSACTION}>
            <HomeOutlined />
            <span>Transaction</span>
            </Link>
        {store.authentication.userData.role !== "Retail" && (
            <Menu.Item key="product">
              <Link to={LINKS.PRODUCT}>
                <DatabaseOutlined/>
                <span>Product</span>
              </Link>
            </Menu.Item>
        )}
        <Menu.Item key="payback">
          <Link to={LINKS.PAYBACK}>
            <DatabaseOutlined/>
            <span>Payback</span>
          </Link>
        </Menu.Item>
        {store.authentication.userData.role === ("Retail" || "Admin") && (
            <Menu.Item key="transaction">
              <Link to={LINKS.TRANSACTION}>
                <HomeOutlined/>
                <span>Transaction</span>
              </Link>
            </Menu.Item>
        )}
        <Menu.Item key="profile">
          <Link to={LINKS.PROFILE}>
          <UserOutlined />
          <span>Profile</span>
        </Link>
      </Menu.Item>
      {/*<Menu.Item key="about">*/}
      {/*	<Link to={'/app/about'}>*/}
      {/*		<CalendarOutlined/>*/}
      {/*		<span>About</span>*/}
      {/*	</Link>*/}
      {/*</Menu.Item>*/}
      <Menu.Divider style={{ background: "transparent", paddingTop: 15 }} />
    </Menu.Item>
  );
});