feat: add styles for sider and remove deprecated menu elements

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}