From 913208cc70335719f3c0cfbbc65aefbe9750bea9 Mon Sep 17 00:00:00 2001 From: gotika Date: Sun, 8 Sep 2024 17:07:47 +0300 Subject: [PATCH] added sidebar --- package-lock.json | 76 ++++++++++++++++++++++++++++++++++++-- package.json | 3 ++ src/App.js | 29 +++++++++------ src/components/groups.css | 0 src/components/navbar.js | 19 ---------- src/components/sidebar.css | 33 +++++++++++++++++ src/components/styles.css | 9 +++++ src/pages/groups.js | 24 ++++++++---- src/pages/sidebar.js | 21 +++++++++++ 9 files changed, 173 insertions(+), 41 deletions(-) create mode 100644 src/components/groups.css delete mode 100644 src/components/navbar.js create mode 100644 src/components/sidebar.css create mode 100644 src/components/styles.css create mode 100644 src/pages/sidebar.js diff --git a/package-lock.json b/package-lock.json index e30da17..14b720e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,9 @@ "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "chart.js": "^4.4.4", + "primeflex": "^3.3.1", + "primeicons": "^7.0.0", + "primereact": "^10.8.2", "react": "^18.3.1", "react-chartjs-2": "^5.2.0", "react-dom": "^18.3.1", @@ -4761,6 +4764,15 @@ "@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": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", @@ -7868,6 +7880,16 @@ "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": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz", @@ -14257,7 +14279,6 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -16269,6 +16290,41 @@ "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": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", @@ -16304,7 +16360,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "license": "MIT", "dependencies": { "loose-envify": "^1.4.0", @@ -16316,7 +16371,6 @@ "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true, "license": "MIT" }, "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": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/package.json b/package.json index 5289cc5..b0e2678 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,9 @@ "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "chart.js": "^4.4.4", + "primeflex": "^3.3.1", + "primeicons": "^7.0.0", + "primereact": "^10.8.2", "react": "^18.3.1", "react-chartjs-2": "^5.2.0", "react-dom": "^18.3.1", diff --git a/src/App.js b/src/App.js index fc4225c..832b99f 100644 --- a/src/App.js +++ b/src/App.js @@ -6,21 +6,28 @@ import Migration from './pages/migration'; import GlobalMailing from './pages/GlobalMailing'; import GlobalVariables from './pages/GlobalVariables'; 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() { return ( -
- - - } /> - } /> - } /> - } /> - } /> - } /> - +
+ +
+ + } /> + } /> + } /> + } /> + } /> + } /> + +
); diff --git a/src/components/groups.css b/src/components/groups.css new file mode 100644 index 0000000..e69de29 diff --git a/src/components/navbar.js b/src/components/navbar.js deleted file mode 100644 index aebc805..0000000 --- a/src/components/navbar.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import { Link } from 'react-router-dom'; - -function Navbar() { - return ( - - ); -} - -export default Navbar; \ No newline at end of file diff --git a/src/components/sidebar.css b/src/components/sidebar.css new file mode 100644 index 0000000..0835d3c --- /dev/null +++ b/src/components/sidebar.css @@ -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; + } \ No newline at end of file diff --git a/src/components/styles.css b/src/components/styles.css new file mode 100644 index 0000000..19312a7 --- /dev/null +++ b/src/components/styles.css @@ -0,0 +1,9 @@ +.card-custom { + background-color: #f9fafb; + border-radius: 10px; +} + +.listbox-custom { + background-color: #fff; + border: 1px solid #e5e7eb; +} \ No newline at end of file diff --git a/src/pages/groups.js b/src/pages/groups.js index 1c3e7d5..f461bd3 100644 --- a/src/pages/groups.js +++ b/src/pages/groups.js @@ -1,16 +1,24 @@ import React from 'react'; +import { Card } from 'primereact/card'; +import { ListBox } from 'primereact/listbox'; +import { Panel } from 'primereact/panel'; const Groups = () => { - const groups = ['Admins', 'Editors', 'Viewers']; //заглушка(потом нужно убрать и доделать) + const groups = [ + { label: 'Admins', value: 'Admins' }, + { label: 'Editors', value: 'Editors' }, + { label: 'Viewers', value: 'Viewers' } + ]; // Заглушка (потом нужно убрать и доделать) return ( -
-

Группы пользователей

-
    - {groups.map((group, index) => ( -
  • {group}
    • - ))} -
+
+
+ + + + + +
); }; diff --git a/src/pages/sidebar.js b/src/pages/sidebar.js new file mode 100644 index 0000000..5117238 --- /dev/null +++ b/src/pages/sidebar.js @@ -0,0 +1,21 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; +import '../components/sidebar.css'; // Импорт стилей + +const Sidebar = () => { + return ( +
+

Navigation

+
    +
  • Users
    • +
  • Groups
    • +
  • Migration
    • +
  • Global Mailing
    • +
  • Global Variables
    • +
  • Performance
    • +
+
+ ); +}; + +export default Sidebar; \ No newline at end of file