client/src/components/SiderMenu.tsx

@@ -1,4 +1,4 @@
-import { Divider, Menu } from 'antd';
+import { Divider, Menu, Tooltip } from 'antd';
 import React from 'react';
 
 interface SiderMenuProps {
@@ -12,6 +12,10 @@ export default function SiderMenu({
   selectedKey,
   hangleMenuClick,
 }: SiderMenuProps) {
+  const collapseStyle = collapsed
+    ? { fontSize: '12px' }
+    : { fontSize: '12px', paddingLeft: '52px' };
+
   const menuItems = [
     {
       key: 'toggle',
@@ -33,7 +37,7 @@ export default function SiderMenu({
       icon: (
         <img src="./icons/sider/process-diagram.svg" alt="process diagram" />
       ),
-      label: 'Схемы процессов',
+      label: <Tooltip title="Схемы процессов">Схемы процессов</Tooltip>,
     },
     {
       key: '/running-processes',
@@ -43,7 +47,7 @@ export default function SiderMenu({
           alt="running processes"
         />
       ),
-      label: 'Запущенные процессы',
+      label: <Tooltip title="Запущенные процессы">Запущенные процессы</Tooltip>,
     },
     !collapsed
       ? {
@@ -53,6 +57,7 @@ export default function SiderMenu({
             marginBottom: '-16px',
             marginTop: '-4px',
             cursor: 'default',
+            width: '100%',
           },
           disabled: true,
         }
@@ -65,18 +70,30 @@ export default function SiderMenu({
       children: [
         {
           key: '/accounts',
-          label: 'Учетные записи',
+          label: !collapsed ? (
-          style: { fontSize: '12px', paddingLeft: '52px' },
+            <Tooltip title="Учетные записи">Учетные записи</Tooltip>
+          ) : (
+            'Учетные записи'
+          ),
+          style: collapseStyle,
         },
         {
           key: '/events-list',
-          label: 'Справочник событий',
+          label: !collapsed ? (
-          style: { fontSize: '12px', paddingLeft: '52px' },
+            <Tooltip title="Справочник событий">Справочник событий</Tooltip>
+          ) : (
+            'Справочник событий'
+          ),
+          style: collapseStyle,
         },
         {
           key: '/configuration',
-          label: 'Конфигурация',
+          label: !collapsed ? (
-          style: { fontSize: '12px', paddingLeft: '52px' },
+            <Tooltip title="Конфигурация">Конфигурация</Tooltip>
+          ) : (
+            'Конфигурация'
+          ),
+          style: collapseStyle,
         },
       ],
     },

client/src/config/customTheme.ts

@@ -6,6 +6,7 @@ export const theme = {
       itemColor: 'f2f2f2',
       itemBg: '#f2f2f2',
       subMenuItemBg: '#f2f2f2',
+      iconSize: '18px',
     },
     Layout: {
       bodyBg: '#f2f2f2',