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}
+    />
   );
 }

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%'}
-        collapsedWidth={'3.8%'}
+        width={width}
+        collapsedWidth={collapsedWidth}
         trigger={null}
-        style={{ backgroundColor: '#f2f2f2' }}
       >
         <SiderMenu
           collapsed={collapsed}