client/src/components/SiderMenu.tsx

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

client/src/index.css

@@ -25,3 +25,11 @@ code {
   border: none;
   color: #548d10;
 }
+
+.sider {
+  background-color: #f2f2f2;
+}
+
+.no-expand-icon .ant-menu-submenu-arrow {
+  display: none !important;
+}

client/src/pages/MainLayout.tsx

@@ -16,22 +16,39 @@ export default function MainLayout() {
   const [collapsed, setCollapsed] = useState(false);
   const [selectedKey, setSelectedKey] = useState('1');
 
+  const [width, setWidth] = useState<number | string>('15%');
+  const [collapsedWidth, setCollapsedWidth] = useState(50);
+
+  const calculateWidths = () => {
+    const windowWidth = window.innerWidth;
+    const expanded = Math.min(Math.max(windowWidth * 0.15, 180), 240);
+    const collapsed = Math.max(windowWidth * 0.038, 50);
+    setWidth(expanded);
+    setCollapsedWidth(collapsed);
+  };
+
+  useEffect(() => {
+    calculateWidths();
+    window.addEventListener('resize', calculateWidths);
+    return () => window.removeEventListener('resize', calculateWidths);
+  }, []);
+
   useEffect(() => {
     if (location.pathname === '/') {
       navigate('/process-diagram');
     }
-  }, [location.pathname]);
-
-  useEffect(() => {
     setSelectedKey(location.pathname);
-  });
+  }, [location.pathname]);
 
   function hangleMenuClick(e: any) {
     const key = e.key;
-    if (key === '0') {
+    if (key === 'toggle') {
       setCollapsed(!collapsed);
       return;
     }
+    if (key === 'divider') {
+      return;
+    }
 
     setSelectedKey(key);
     navigate(key);
@@ -40,14 +57,14 @@ export default function MainLayout() {
   return (
     <Layout style={{ minHeight: '100vh' }}>
       <Sider
+        className="sider"
         collapsible
         collapsed={collapsed}
         onCollapse={(value) => setCollapsed(value)}
         theme="light"
-        width={'15%'}
+        width={width}
-        collapsedWidth={'3.8%'}
+        collapsedWidth={collapsedWidth}
         trigger={null}
-        style={{ backgroundColor: '#f2f2f2' }}
       >
         <SiderMenu
           collapsed={collapsed}