sbt-idp/cope2n-fe/src/components/left-menu/index.tsx

import { AppstoreOutlined, BarChartOutlined } from '@ant-design/icons';
import { t } from '@lingui/macro';
import { Menu, MenuProps } from 'antd';
import React from 'react';
import { useLocation, useNavigate } from 'react-router-dom';

type MenuItem = Required<MenuProps>['items'][number];

function useGetMenuItem() {
  const navigate = useNavigate();
  return function getItem(
    label: React.ReactNode,
    key: React.Key,
    icon?: React.ReactNode,
    children?: MenuItem[],
    type?: 'group',
  ): MenuItem {
    return {
      key,
      icon,
      children,
      label,
      type,
      onClick({ key: clickedKey }) {
        navigate(clickedKey);
      },
    } as MenuItem;
  };
}

function LeftMenu() {
  const location = useLocation();
  const getItem = useGetMenuItem();

  const generalSubItems = [
    getItem(t`Dashboard`, '/dashboard', <AppstoreOutlined />),
    // getItem(t`Inference`, '/inference', <RotateRightOutlined />),
    // getItem(t`Reviews`, '/reviews', <FileSearchOutlined />),
    getItem(t`Reports`, '/reports', <BarChartOutlined />),
    // getItem(t`Users`, '/users', <UsergroupAddOutlined />),
  ];

  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-between',
        height: '100%',
      }}
    >
      <Menu
        mode='vertical'
        selectedKeys={[location.pathname]}
        style={{ borderRight: 'none' }}
        items={generalSubItems}
      />
      {/* <div
        style={{
          display: 'flex',
          alignItems: 'center',
          marginLeft: '20px',
          marginBottom: '20px',
          gap: '10px',
          cursor: 'pointer',
        }}
      >
        <QuestionCircleOutlined />
        <span>Help</span>
      </div> */}
    </div>
  );
}

export default React.memo(LeftMenu);