feat: add base styles and base routes

client/src/pages/MainLayout.tsx

@@ -1,19 +1,40 @@
-import React, { useState } from 'react';
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useEffect, useState } from 'react';
 import { Layout } from 'antd';
 import Sider from 'antd/es/layout/Sider';
 import SiderMenu from '../components/SiderMenu';
+import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
+import ProcessDiagramPage from './ProcessDiagramPage';
+import RunningProcessesPage from './RunningProcessesPage';
+import AccountsPage from './AccountsPage';
+import EventsListPage from './EventsListPage';
+import ConfigurationPage from './ConfigurationPage';
 
 export default function MainLayout() {
+  const navigate = useNavigate();
+  const location = useLocation();
   const [collapsed, setCollapsed] = useState(false);
   const [selectedKey, setSelectedKey] = useState('1');
 
+  useEffect(() => {
+    if (location.pathname === '/') {
+      navigate('/process-diagram');
+    }
+  }, [location.pathname]);
+
+  useEffect(() => {
+    setSelectedKey(location.pathname);
+  });
+
   function hangleMenuClick(e: any) {
-    if (e.key === '0') {
-      setCollapsed((prev) => !prev);
+    const key = e.key;
+    if (key === '0') {
+      setCollapsed(!collapsed);
       return;
     }
 
-    setSelectedKey(e.key);
+    setSelectedKey(key);
+    navigate(key);
   }
 
   return (
@@ -26,14 +47,23 @@ export default function MainLayout() {
         width={'15%'}
         collapsedWidth={'3.8%'}
         trigger={null}
+        style={{ backgroundColor: '#f2f2f2' }}
       >
         <SiderMenu
+          collapsed={collapsed}
           selectedKey={selectedKey}
           hangleMenuClick={hangleMenuClick}
         />
       </Sider>
       <Layout>
-        <div>Main layout</div>
+        <Routes>
+          <Route path="/process-diagram" element={<ProcessDiagramPage />} />
+          <Route path="/running-processes" element={<RunningProcessesPage />} />
+          <Route path="/accounts" element={<AccountsPage />} />
+          <Route path="/events-list" element={<EventsListPage />} />
+          <Route path="/configuration" element={<ConfigurationPage />} />
+          <Route path="*" element={<div>404 Not Found</div>} />
+        </Routes>
       </Layout>
     </Layout>
   );