feat: add MainLayout with sidebar

client/public/icons/sider/menu.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 12V10H18V12H0ZM0 7V5H18V7H0ZM0 2V0H18V2H0Z" fill="#606060"/>
+</svg>

client/public/icons/sider/menu_open.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 12V10H13V12H0ZM16.6 11L11.6 6L16.6 1L18 2.4L14.4 6L18 9.6L16.6 11ZM0 7V5H10V7H0ZM0 2V0H13V2H0Z" fill="#606060"/>
+</svg>

client/public/icons/sider/process-diagram.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.4 19L12 17.6L13.575 16L12 14.425L13.4 13L15 14.6L16.575 13L18 14.425L16.4 16L18 17.6L16.575 19L15 17.425L13.4 19ZM3 17C3.28333 17 3.52083 16.9042 3.7125 16.7125C3.90417 16.5208 4 16.2833 4 16C4 15.7167 3.90417 15.4792 3.7125 15.2875C3.52083 15.0958 3.28333 15 3 15C2.71667 15 2.47917 15.0958 2.2875 15.2875C2.09583 15.4792 2 15.7167 2 16C2 16.2833 2.09583 16.5208 2.2875 16.7125C2.47917 16.9042 2.71667 17 3 17ZM3 19C2.16667 19 1.45833 18.7083 0.875 18.125C0.291667 17.5417 0 16.8333 0 16C0 15.1667 0.291667 14.4583 0.875 13.875C1.45833 13.2917 2.16667 13 3 13C3.61667 13 4.17917 13.1708 4.6875 13.5125C5.19583 13.8542 5.56667 14.3167 5.8 14.9C6.45 14.7167 6.97917 14.3583 7.3875 13.825C7.79583 13.2917 8 12.6833 8 12V8C8 6.61667 8.4875 5.4375 9.4625 4.4625C10.4375 3.4875 11.6167 3 13 3H14.15L12.575 1.425L14 0L18 4L14 8L12.575 6.6L14.15 5H13C12.1667 5 11.4583 5.29167 10.875 5.875C10.2917 6.45833 10 7.16667 10 8V12C10 13.2167 9.60833 14.2875 8.825 15.2125C8.04167 16.1375 7.05 16.7083 5.85 16.925C5.65 17.5417 5.2875 18.0417 4.7625 18.425C4.2375 18.8083 3.65 19 3 19ZM1.4 7L0 5.6L1.575 4L0 2.425L1.4 1L3 2.6L4.575 1L6 2.425L4.4 4L6 5.6L4.575 7L3 5.425L1.4 7Z" fill="#606060"/>
+</svg>

client/public/icons/sider/running-processes.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 16V14H9V9H7V11H0V5H7V7H9V2H13V0H20V6H13V4H11V12H13V10H20V16H13ZM15 14H18V12H15V14ZM2 9H5V7H2V9ZM15 4H18V2H15V4Z" fill="#606060"/>
+</svg>

client/public/icons/sider/settings.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 18V12H10V14H18V16H10V18H8ZM0 16V14H6V16H0ZM4 12V10H0V8H4V6H6V12H4ZM8 10V8H18V10H8ZM12 6V0H14V2H18V4H14V6H12ZM0 4V2H10V4H0Z" fill="#606060"/>
+</svg>

client/src/App.tsx

@@ -1,7 +1,21 @@
 import React from 'react';
+import { Route, Routes } from 'react-router-dom';
+import MainLayout from './pages/MainLayout';
+import ProtectedRoute from './pages/ProtectedRoute';
 
 function App() {
-  return <div className="App"></div>;
+  return (
+    <div className="App">
+      <div>
+        <Routes>
+          <Route path="/login" element={<div>login</div>} />
+          <Route element={<ProtectedRoute />}>
+            <Route path="*" element={<MainLayout />}></Route>
+          </Route>
+        </Routes>
+      </div>
+    </div>
+  );
 }
 
 export default App;

client/src/components/SiderMenu.tsx

@@ -0,0 +1,61 @@
+import { Menu, MenuProps } from 'antd';
+
+type MenuItem = Required<MenuProps>['items'][number];
+
+function getItem(
+  label: React.ReactNode,
+  key: React.Key,
+  icon?: React.ReactNode,
+  children?: MenuItem[]
+): MenuItem {
+  return {
+    key,
+    icon,
+    children,
+    label,
+  } as MenuItem;
+}
+
+const sidebarItems: MenuItem[] = [
+  getItem('VORKOUT', '0', <img src="./icons/sider/menu.svg" alt="toggle" />),
+  getItem(
+    'Схемы процессов',
+    '1',
+    <img src="./icons/sider/process-diagram.svg" alt="process diagram" />
+  ),
+  getItem(
+    'Запущенные процессы',
+    '2',
+    <img src="./icons/sider/running-processes.svg" alt="running processes" />
+  ),
+  getItem(
+    'Настройки',
+    'sub1',
+    <img src="./icons/sider/settings.svg" alt="settings" />,
+    [
+      getItem('Учетные записи', '3'),
+      getItem('Справичник событий', '4'),
+      getItem('Конфигурация', '5'),
+    ]
+  ),
+];
+
+interface SiderMenuProps {
+  selectedKey: string;
+  hangleMenuClick: (e: any) => void;
+}
+
+export default function SiderMenu({
+  selectedKey,
+  hangleMenuClick,
+}: SiderMenuProps) {
+  return (
+    <Menu
+      theme="light"
+      selectedKeys={[selectedKey]}
+      mode="inline"
+      items={sidebarItems}
+      onClick={hangleMenuClick}
+    />
+  );
+}

client/src/index.tsx

@@ -2,8 +2,13 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
+import { BrowserRouter } from 'react-router-dom';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
-root.render(<App />);
+root.render(
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>
+);

client/src/pages/MainLayout.tsx

@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import { Layout } from 'antd';
+import Sider from 'antd/es/layout/Sider';
+import SiderMenu from '../components/SiderMenu';
+
+export default function MainLayout() {
+  const [collapsed, setCollapsed] = useState(false);
+  const [selectedKey, setSelectedKey] = useState('1');
+
+  function hangleMenuClick(e: any) {
+    if (e.key === '0') {
+      setCollapsed((prev) => !prev);
+      return;
+    }
+
+    setSelectedKey(e.key);
+  }
+
+  return (
+    <Layout style={{ minHeight: '100vh' }}>
+      <Sider
+        collapsible
+        collapsed={collapsed}
+        onCollapse={(value) => setCollapsed(value)}
+        theme="light"
+        width={'15%'}
+        collapsedWidth={'3.8%'}
+        trigger={null}
+      >
+        <SiderMenu
+          selectedKey={selectedKey}
+          hangleMenuClick={hangleMenuClick}
+        />
+      </Sider>
+      <Layout>
+        <div>Main layout</div>
+      </Layout>
+    </Layout>
+  );
+}

client/src/pages/ProtectedRoute.tsx

@@ -0,0 +1,8 @@
+// ProtectedRoute.js
+import { Outlet } from 'react-router-dom';
+import React from 'react';
+
+const ProtectedRoute = (): React.JSX.Element => {
+  return <Outlet />;
+};
+export default ProtectedRoute;