feat: add base styles and base routes

client/src/components/Header.tsx

@@ -0,0 +1,56 @@
+import Title from 'antd/es/typography/Title';
+
+interface HeaderProps {
+  title: string;
+}
+
+export default function Header({ title }: HeaderProps) {
+  return (
+    <div
+      style={{
+        height: '72px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+      }}
+    >
+      <Title style={{ marginLeft: '16px' }} level={3}>
+        {title}
+      </Title>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '24px',
+          marginRight: '26px',
+        }}
+      >
+        <img
+          src="./icons/sider/more.svg"
+          alt="more"
+          style={{ height: '16px', width: '16px' }}
+        />
+        <div
+          style={{
+            borderRadius: '50%',
+            border: '2px solid #8BC34A',
+            height: '32px',
+            width: '32px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <img
+            src="https://cdn-icons-png.flaticon.com/512/219/219986.png"
+            alt="user"
+            style={{
+              height: '25.771240234375px',
+              width: '25.771240234375px',
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

client/src/components/SiderMenu.tsx

@@ -1,61 +1,96 @@
-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'),
-    ]
-  ),
-];
+import { Divider, Menu } from 'antd';
+import React from 'react';
 
 interface SiderMenuProps {
+  collapsed: boolean;
   selectedKey: string;
   hangleMenuClick: (e: any) => void;
 }
 
 export default function SiderMenu({
+  collapsed,
   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"
+          />
+        }
+        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>
+  );
+
   return (
     <Menu
       theme="light"
       selectedKeys={[selectedKey]}
       mode="inline"
-      items={sidebarItems}
       onClick={hangleMenuClick}
-    />
+      defaultOpenKeys={['sub1']}
+    >
+      {menuItems}
+    </Menu>
   );
 }