119 lines
2.7 KiB
TypeScript
119 lines
2.7 KiB
TypeScript
import { Divider, Menu, Tooltip } from 'antd';
|
|
import React from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
interface SiderMenuProps {
|
|
collapsed: boolean;
|
|
selectedKey: string;
|
|
hangleMenuClick: (e: any) => void;
|
|
}
|
|
|
|
export default function SiderMenu({
|
|
collapsed,
|
|
selectedKey,
|
|
hangleMenuClick,
|
|
}: SiderMenuProps) {
|
|
const { t } = useTranslation();
|
|
const collapseStyle = collapsed
|
|
? { fontSize: '12px' }
|
|
: { fontSize: '12px', paddingLeft: '52px' };
|
|
|
|
const menuItems = [
|
|
{
|
|
key: 'toggle',
|
|
icon: (
|
|
<img
|
|
src={
|
|
!collapsed
|
|
? './icons/sider/menu_open.svg'
|
|
: './icons/sider/menu.svg'
|
|
}
|
|
alt="toggle"
|
|
/>
|
|
),
|
|
label: 'VORKOUT',
|
|
style: { fontSize: '20px' },
|
|
},
|
|
{
|
|
key: '/process-diagram',
|
|
icon: (
|
|
<img src="./icons/sider/process-diagram.svg" alt="process diagram" />
|
|
),
|
|
label: (
|
|
<Tooltip title={t('processDiagrams')}>{t('processDiagrams')}</Tooltip>
|
|
),
|
|
},
|
|
{
|
|
key: '/running-processes',
|
|
icon: (
|
|
<img
|
|
src="./icons/sider/running-processes.svg"
|
|
alt="running processes"
|
|
/>
|
|
),
|
|
label: (
|
|
<Tooltip title={t('runningProcesses')}>{t('runningProcesses')}</Tooltip>
|
|
),
|
|
},
|
|
!collapsed
|
|
? {
|
|
key: 'divider',
|
|
label: <Divider />,
|
|
style: {
|
|
marginBottom: '-16px',
|
|
marginTop: '-4px',
|
|
cursor: 'default',
|
|
width: '100%',
|
|
},
|
|
disabled: true,
|
|
}
|
|
: null,
|
|
{
|
|
key: 'sub1',
|
|
icon: <img src="./icons/sider/settings.svg" alt="settings" />,
|
|
label: t('settings'),
|
|
className: 'no-expand-icon',
|
|
children: [
|
|
{
|
|
key: '/accounts',
|
|
label: !collapsed ? (
|
|
<Tooltip title={t('accounts')}>{t('accounts')}</Tooltip>
|
|
) : (
|
|
t('accounts')
|
|
),
|
|
style: collapseStyle,
|
|
},
|
|
{
|
|
key: '/events-list',
|
|
label: !collapsed ? (
|
|
<Tooltip title={t('eventsList')}>{t('eventsList')}</Tooltip>
|
|
) : (
|
|
t('eventsList')
|
|
),
|
|
style: collapseStyle,
|
|
},
|
|
{
|
|
key: '/configuration',
|
|
label: !collapsed ? (
|
|
<Tooltip title={t('configuration')}>{t('configuration')}</Tooltip>
|
|
) : (
|
|
t('configuration')
|
|
),
|
|
style: collapseStyle,
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
return (
|
|
<Menu
|
|
theme="light"
|
|
selectedKeys={[selectedKey]}
|
|
mode="inline"
|
|
onClick={hangleMenuClick}
|
|
defaultOpenKeys={['sub1']}
|
|
items={menuItems}
|
|
/>
|
|
);
|
|
}
|