83 lines
1.9 KiB
TypeScript
83 lines
1.9 KiB
TypeScript
import {
|
|
AppstoreOutlined,
|
|
BarChartOutlined,
|
|
FileSearchOutlined,
|
|
QuestionCircleOutlined,
|
|
RotateRightOutlined,
|
|
UsergroupAddOutlined,
|
|
} 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);
|