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

import { AppstoreOutlined, BarChartOutlined, RotateRightOutlined, FileSearchOutlined } 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`Reports`, '/reports', <BarChartOutlined />),
    // getItem(t`Review`, '/reviews', <FileSearchOutlined />),
    getItem(t`Inference`, '/inference', <RotateRightOutlined />),
    // getItem(t`Users`, '/users', <UsergroupAddOutlined />),
  ];

  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        height: '100%',
      }}
    >
      <div style={{
        padding: '16px 8px 8px 8px',
        fontWeight: 600,
        color: '#555',
      }}>
        Menu
      </div>
      <Menu
        mode='vertical'
        selectedKeys={[location.pathname]}
        style={{ borderRight: 'none' }}
        items={generalSubItems}
      />
    </div>
  );
}

export default React.memo(LeftMenu);