feat: add base styles and base routes

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