From 51227bfd7b9c37592a77f3ff19921a21db0b7f29 Mon Sep 17 00:00:00 2001 From: Vladislav Date: Wed, 16 Apr 2025 13:14:26 +0500 Subject: [PATCH] feat: add MainLayout with sidebar --- client/public/icons/sider/menu.svg | 3 + client/public/icons/sider/menu_open.svg | 3 + client/public/icons/sider/process-diagram.svg | 3 + .../public/icons/sider/running-processes.svg | 3 + client/public/icons/sider/settings.svg | 3 + client/src/App.tsx | 16 ++++- client/src/components/SiderMenu.tsx | 61 +++++++++++++++++++ client/src/index.tsx | 7 ++- client/src/pages/MainLayout.tsx | 40 ++++++++++++ client/src/pages/ProtectedRoute.tsx | 8 +++ 10 files changed, 145 insertions(+), 2 deletions(-) create mode 100644 client/public/icons/sider/menu.svg create mode 100644 client/public/icons/sider/menu_open.svg create mode 100644 client/public/icons/sider/process-diagram.svg create mode 100644 client/public/icons/sider/running-processes.svg create mode 100644 client/public/icons/sider/settings.svg create mode 100644 client/src/components/SiderMenu.tsx create mode 100644 client/src/pages/MainLayout.tsx create mode 100644 client/src/pages/ProtectedRoute.tsx diff --git a/client/public/icons/sider/menu.svg b/client/public/icons/sider/menu.svg new file mode 100644 index 0000000..f380914 --- /dev/null +++ b/client/public/icons/sider/menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/public/icons/sider/menu_open.svg b/client/public/icons/sider/menu_open.svg new file mode 100644 index 0000000..9cf2fd4 --- /dev/null +++ b/client/public/icons/sider/menu_open.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/public/icons/sider/process-diagram.svg b/client/public/icons/sider/process-diagram.svg new file mode 100644 index 0000000..639c697 --- /dev/null +++ b/client/public/icons/sider/process-diagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/public/icons/sider/running-processes.svg b/client/public/icons/sider/running-processes.svg new file mode 100644 index 0000000..d68fcb5 --- /dev/null +++ b/client/public/icons/sider/running-processes.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/public/icons/sider/settings.svg b/client/public/icons/sider/settings.svg new file mode 100644 index 0000000..562ed62 --- /dev/null +++ b/client/public/icons/sider/settings.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/src/App.tsx b/client/src/App.tsx index e91ac07..a413c05 100644 --- a/client/src/App.tsx +++ b/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
; + return ( +
+
+ + login
} /> + }> + }> + + +
+ + ); } export default App; diff --git a/client/src/components/SiderMenu.tsx b/client/src/components/SiderMenu.tsx new file mode 100644 index 0000000..ea0d238 --- /dev/null +++ b/client/src/components/SiderMenu.tsx @@ -0,0 +1,61 @@ +import { Menu, MenuProps } from 'antd'; + +type MenuItem = Required['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', toggle), + getItem( + 'Схемы процессов', + '1', + process diagram + ), + getItem( + 'Запущенные процессы', + '2', + running processes + ), + getItem( + 'Настройки', + 'sub1', + settings, + [ + getItem('Учетные записи', '3'), + getItem('Справичник событий', '4'), + getItem('Конфигурация', '5'), + ] + ), +]; + +interface SiderMenuProps { + selectedKey: string; + hangleMenuClick: (e: any) => void; +} + +export default function SiderMenu({ + selectedKey, + hangleMenuClick, +}: SiderMenuProps) { + return ( + + ); +} diff --git a/client/src/index.tsx b/client/src/index.tsx index 0a219d4..7087bbe 100644 --- a/client/src/index.tsx +++ b/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(); +root.render( + + + +); diff --git a/client/src/pages/MainLayout.tsx b/client/src/pages/MainLayout.tsx new file mode 100644 index 0000000..1641576 --- /dev/null +++ b/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 ( + + setCollapsed(value)} + theme="light" + width={'15%'} + collapsedWidth={'3.8%'} + trigger={null} + > + + + +
Main layout
+ + + ); +} diff --git a/client/src/pages/ProtectedRoute.tsx b/client/src/pages/ProtectedRoute.tsx new file mode 100644 index 0000000..43fc045 --- /dev/null +++ b/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 ; +}; +export default ProtectedRoute;