97 lines
2.1 KiB
TypeScript
97 lines
2.1 KiB
TypeScript
import { Divider, Menu } from 'antd';
|
||
import React from 'react';
|
||
|
||
interface SiderMenuProps {
|
||
collapsed: boolean;
|
||
selectedKey: string;
|
||
hangleMenuClick: (e: any) => void;
|
||
}
|
||
|
||
export default function SiderMenu({
|
||
collapsed,
|
||
selectedKey,
|
||
hangleMenuClick,
|
||
}: SiderMenuProps) {
|
||
const menuItems = (
|
||
<React.Fragment>
|
||
<Menu.Item
|
||
key="0"
|
||
icon={
|
||
<img
|
||
src={
|
||
!collapsed
|
||
? './icons/sider/menu_open.svg'
|
||
: './icons/sider/menu.svg'
|
||
}
|
||
alt="toggle"
|
||
/>
|
||
}
|
||
style={{ fontSize: '20px' }}
|
||
>
|
||
VORKOUT
|
||
</Menu.Item>
|
||
|
||
<Menu.Item
|
||
key="/process-diagram"
|
||
icon={
|
||
<img src="./icons/sider/process-diagram.svg" alt="process diagram" />
|
||
}
|
||
>
|
||
Схемы процессов
|
||
</Menu.Item>
|
||
|
||
<Menu.Item
|
||
key="/running-processes"
|
||
icon={
|
||
<img
|
||
src="./icons/sider/running-processes.svg"
|
||
alt="running processes"
|
||
/>
|
||
}
|
||
>
|
||
Запущенные процессы
|
||
</Menu.Item>
|
||
|
||
{!collapsed && <Divider style={{ marginBottom: 0 }} />}
|
||
|
||
<Menu.SubMenu
|
||
key="sub1"
|
||
icon={<img src="./icons/sider/settings.svg" alt="settings" />}
|
||
title="Настройки"
|
||
expandIcon={false}
|
||
>
|
||
<Menu.Item
|
||
key="/accounts"
|
||
style={{ fontSize: '12px', paddingLeft: '52px' }}
|
||
>
|
||
Учетные записи
|
||
</Menu.Item>
|
||
<Menu.Item
|
||
key="/events-list"
|
||
style={{ fontSize: '12px', paddingLeft: '52px' }}
|
||
>
|
||
Справочник событий
|
||
</Menu.Item>
|
||
<Menu.Item
|
||
key="/configuration"
|
||
style={{ fontSize: '12px', paddingLeft: '52px' }}
|
||
>
|
||
Конфигурация
|
||
</Menu.Item>
|
||
</Menu.SubMenu>
|
||
</React.Fragment>
|
||
);
|
||
|
||
return (
|
||
<Menu
|
||
theme="light"
|
||
selectedKeys={[selectedKey]}
|
||
mode="inline"
|
||
onClick={hangleMenuClick}
|
||
defaultOpenKeys={['sub1']}
|
||
>
|
||
{menuItems}
|
||
</Menu>
|
||
);
|
||
}
|