added sidebar
This commit is contained in:
parent
3f00cd4f60
commit
913208cc70
76
package-lock.json
generated
76
package-lock.json
generated
@ -12,6 +12,9 @@
|
|||||||
"@testing-library/react": "^13.4.0",
|
"@testing-library/react": "^13.4.0",
|
||||||
"@testing-library/user-event": "^13.5.0",
|
"@testing-library/user-event": "^13.5.0",
|
||||||
"chart.js": "^4.4.4",
|
"chart.js": "^4.4.4",
|
||||||
|
"primeflex": "^3.3.1",
|
||||||
|
"primeicons": "^7.0.0",
|
||||||
|
"primereact": "^10.8.2",
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-chartjs-2": "^5.2.0",
|
"react-chartjs-2": "^5.2.0",
|
||||||
"react-dom": "^18.3.1",
|
"react-dom": "^18.3.1",
|
||||||
@ -4761,6 +4764,15 @@
|
|||||||
"@types/react": "*"
|
"@types/react": "*"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@types/react-transition-group": {
|
||||||
|
"version": "4.4.11",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz",
|
||||||
|
"integrity": "sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@types/react": "*"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@types/resolve": {
|
"node_modules/@types/resolve": {
|
||||||
"version": "1.17.1",
|
"version": "1.17.1",
|
||||||
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
|
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
|
||||||
@ -7868,6 +7880,16 @@
|
|||||||
"utila": "~0.4"
|
"utila": "~0.4"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/dom-helpers": {
|
||||||
|
"version": "5.2.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
|
||||||
|
"integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/runtime": "^7.8.7",
|
||||||
|
"csstype": "^3.0.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/dom-serializer": {
|
"node_modules/dom-serializer": {
|
||||||
"version": "1.4.1",
|
"version": "1.4.1",
|
||||||
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
|
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
|
||||||
@ -14257,7 +14279,6 @@
|
|||||||
"version": "4.1.1",
|
"version": "4.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
|
||||||
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
|
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
@ -16269,6 +16290,41 @@
|
|||||||
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
|
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/primeflex": {
|
||||||
|
"version": "3.3.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/primeflex/-/primeflex-3.3.1.tgz",
|
||||||
|
"integrity": "sha512-zaOq3YvcOYytbAmKv3zYc+0VNS9Wg5d37dfxZnveKBFPr7vEIwfV5ydrpiouTft8MVW6qNjfkaQphHSnvgQbpQ==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
|
"node_modules/primeicons": {
|
||||||
|
"version": "7.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/primeicons/-/primeicons-7.0.0.tgz",
|
||||||
|
"integrity": "sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
|
"node_modules/primereact": {
|
||||||
|
"version": "10.8.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/primereact/-/primereact-10.8.2.tgz",
|
||||||
|
"integrity": "sha512-bf7vktogGh0PmKT9WLDcJQoQNqqFqcAlP2crUqccnlTu63FNnQV82qEYyaFvE12Qd5qhm3EYmpsHjpf6/+olTQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@types/react-transition-group": "^4.4.1",
|
||||||
|
"react-transition-group": "^4.4.1"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=14.0.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||||
|
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||||
|
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"@types/react": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/process-nextick-args": {
|
"node_modules/process-nextick-args": {
|
||||||
"version": "2.0.1",
|
"version": "2.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
|
||||||
@ -16304,7 +16360,6 @@
|
|||||||
"version": "15.8.1",
|
"version": "15.8.1",
|
||||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"loose-envify": "^1.4.0",
|
"loose-envify": "^1.4.0",
|
||||||
@ -16316,7 +16371,6 @@
|
|||||||
"version": "16.13.1",
|
"version": "16.13.1",
|
||||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
|
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
|
||||||
"dev": true,
|
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/proxy-addr": {
|
"node_modules/proxy-addr": {
|
||||||
@ -16798,6 +16852,22 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/react-transition-group": {
|
||||||
|
"version": "4.4.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
|
||||||
|
"integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
|
||||||
|
"license": "BSD-3-Clause",
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/runtime": "^7.5.5",
|
||||||
|
"dom-helpers": "^5.0.1",
|
||||||
|
"loose-envify": "^1.4.0",
|
||||||
|
"prop-types": "^15.6.2"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": ">=16.6.0",
|
||||||
|
"react-dom": ">=16.6.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/read-cache": {
|
"node_modules/read-cache": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
|
||||||
|
@ -7,6 +7,9 @@
|
|||||||
"@testing-library/react": "^13.4.0",
|
"@testing-library/react": "^13.4.0",
|
||||||
"@testing-library/user-event": "^13.5.0",
|
"@testing-library/user-event": "^13.5.0",
|
||||||
"chart.js": "^4.4.4",
|
"chart.js": "^4.4.4",
|
||||||
|
"primeflex": "^3.3.1",
|
||||||
|
"primeicons": "^7.0.0",
|
||||||
|
"primereact": "^10.8.2",
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-chartjs-2": "^5.2.0",
|
"react-chartjs-2": "^5.2.0",
|
||||||
"react-dom": "^18.3.1",
|
"react-dom": "^18.3.1",
|
||||||
|
13
src/App.js
13
src/App.js
@ -6,13 +6,19 @@ import Migration from './pages/migration';
|
|||||||
import GlobalMailing from './pages/GlobalMailing';
|
import GlobalMailing from './pages/GlobalMailing';
|
||||||
import GlobalVariables from './pages/GlobalVariables';
|
import GlobalVariables from './pages/GlobalVariables';
|
||||||
import PerformanceMetrics from './pages/performance';
|
import PerformanceMetrics from './pages/performance';
|
||||||
import Navbar from './components/navbar';
|
import Sidebar from './pages/sidebar';
|
||||||
|
import 'primereact/resources/themes/lara-light-indigo/theme.css';
|
||||||
|
import 'primereact/resources/primereact.min.css';
|
||||||
|
import 'primeicons/primeicons.css';
|
||||||
|
import 'primeflex/primeflex.css';
|
||||||
|
import './components/styles.css';
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
<Router>
|
<Router>
|
||||||
<div>
|
<div style={{ display: 'flex' }}>
|
||||||
<Navbar />
|
<Sidebar />
|
||||||
|
<div style={{ flex: 1, marginLeft: '200px', padding: '20px' }}>
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route path="/" element={<Users />} />
|
<Route path="/" element={<Users />} />
|
||||||
<Route path="/groups" element={<Groups />} />
|
<Route path="/groups" element={<Groups />} />
|
||||||
@ -22,6 +28,7 @@ function App() {
|
|||||||
<Route path="/performance" element={<PerformanceMetrics />} />
|
<Route path="/performance" element={<PerformanceMetrics />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</Router>
|
</Router>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
0
src/components/groups.css
Normal file
0
src/components/groups.css
Normal file
@ -1,19 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { Link } from 'react-router-dom';
|
|
||||||
|
|
||||||
function Navbar() {
|
|
||||||
return (
|
|
||||||
<nav>
|
|
||||||
<ul>
|
|
||||||
<li><Link to="/">Users</Link></li>
|
|
||||||
<li><Link to="/groups">User Groups</Link></li>
|
|
||||||
<li><Link to="/migration">Data Migration</Link></li>
|
|
||||||
<li><Link to="/GlobalMailing">Global Mailing</Link></li>
|
|
||||||
<li><Link to="/GlobalVariables">Global Variables</Link></li>
|
|
||||||
<li><Link to="/performance">Performance Metrics</Link></li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Navbar;
|
|
33
src/components/sidebar.css
Normal file
33
src/components/sidebar.css
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
.sidebar {
|
||||||
|
width: 200px;
|
||||||
|
padding: 20px;
|
||||||
|
border-right: 1px solid #ddd;
|
||||||
|
background-color: #f4f4f4;
|
||||||
|
height: 100vh;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar h3 {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar ul {
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar ul li {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar ul li a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #333;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar ul li a:hover {
|
||||||
|
color: #007bff;
|
||||||
|
}
|
9
src/components/styles.css
Normal file
9
src/components/styles.css
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
.card-custom {
|
||||||
|
background-color: #f9fafb;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listbox-custom {
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
}
|
@ -1,16 +1,24 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { Card } from 'primereact/card';
|
||||||
|
import { ListBox } from 'primereact/listbox';
|
||||||
|
import { Panel } from 'primereact/panel';
|
||||||
|
|
||||||
const Groups = () => {
|
const Groups = () => {
|
||||||
const groups = ['Admins', 'Editors', 'Viewers']; //заглушка(потом нужно убрать и доделать)
|
const groups = [
|
||||||
|
{ label: 'Admins', value: 'Admins' },
|
||||||
|
{ label: 'Editors', value: 'Editors' },
|
||||||
|
{ label: 'Viewers', value: 'Viewers' }
|
||||||
|
]; // Заглушка (потом нужно убрать и доделать)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div className="p-grid p-justify-center p-mt-5">
|
||||||
<h2>Группы пользователей</h2>
|
<div className="p-col-12 p-md-6">
|
||||||
<ul>
|
<Card title="Группы пользователей" className="p-shadow-3">
|
||||||
{groups.map((group, index) => (
|
<Panel header="Доступные группы">
|
||||||
<li key={index}>{group}</li>
|
<ListBox value={null} options={groups} className="p-mt-2" style={{ width: '100%' }} />
|
||||||
))}
|
</Panel>
|
||||||
</ul>
|
</Card>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
21
src/pages/sidebar.js
Normal file
21
src/pages/sidebar.js
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import '../components/sidebar.css'; // Импорт стилей
|
||||||
|
|
||||||
|
const Sidebar = () => {
|
||||||
|
return (
|
||||||
|
<div className="sidebar">
|
||||||
|
<h3>Navigation</h3>
|
||||||
|
<ul>
|
||||||
|
<li><Link to="/">Users</Link></li>
|
||||||
|
<li><Link to="/groups">Groups</Link></li>
|
||||||
|
<li><Link to="/migration">Migration</Link></li>
|
||||||
|
<li><Link to="/globalMailing">Global Mailing</Link></li>
|
||||||
|
<li><Link to="/globalVariables">Global Variables</Link></li>
|
||||||
|
<li><Link to="/performance">Performance</Link></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Sidebar;
|
Loading…
Reference in New Issue
Block a user