feat: add styles for sider and remove deprecated menu elements

client/src/components/SiderMenu.tsx

@@ -12,75 +12,75 @@ export default function SiderMenu({
   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"
-          />
+  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: 'Схемы процессов',
+    },
+    {
+      key: '/running-processes',
+      icon: (
+        <img
+          src="./icons/sider/running-processes.svg"
+          alt="running processes"
+        />
+      ),
+      label: 'Запущенные процессы',
+    },
+    !collapsed
+      ? {
+          key: 'divider',
+          label: <Divider />,
+          style: {
+            marginBottom: '-16px',
+            marginTop: '-4px',
+            cursor: 'default',
+          },
+          disabled: true,
         }
-        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>
-  );
+      : null,
+    {
+      key: 'sub1',
+      icon: <img src="./icons/sider/settings.svg" alt="settings" />,
+      label: 'Настройки',
+      className: 'no-expand-icon',
+      children: [
+        {
+          key: '/accounts',
+          label: 'Учетные записи',
+          style: { fontSize: '12px', paddingLeft: '52px' },
+        },
+        {
+          key: '/events-list',
+          label: 'Справочник событий',
+          style: { fontSize: '12px', paddingLeft: '52px' },
+        },
+        {
+          key: '/configuration',
+          label: 'Конфигурация',
+          style: { fontSize: '12px', paddingLeft: '52px' },
+        },
+      ],
+    },
+  ];
 
   return (
     <Menu
@@ -89,8 +89,7 @@ export default function SiderMenu({
       mode="inline"
       onClick={hangleMenuClick}
       defaultOpenKeys={['sub1']}
-    >
-      {menuItems}
-    </Menu>
+      items={menuItems}
+    />
   );
 }