From a55fd6bc3926a80ab6f89893b876cc1492e3e348 Mon Sep 17 00:00:00 2001 From: "ns.potapov" Date: Sat, 6 Jan 2024 14:44:55 +0400 Subject: [PATCH] =?UTF-8?q?=D0=A1=D1=82=D0=B8=D0=BB=D0=B5=D0=B2=D1=8B?= =?UTF-8?q?=D0=B5=20=D0=B4=D0=BE=D1=80=D0=B0=D0=B1=D0=BE=D1=82=D0=BA=D0=B8?= =?UTF-8?q?=20=D0=BA=D0=BD=D0=BE=D0=BF=D0=BE=D0=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- data.json | 16 ++++++ package-lock.json | 26 +++++++--- package.json | 8 +-- src/components/header/header.jsx | 2 + .../headerusermenu/headerusermenu.css | 29 +++++++++++ .../headerusermenu/headerusermenu.jsx | 52 +++++++++++++++++++ .../postinputform/postinputform.css | 5 ++ .../userprofileblock/userprofileblock.css | 3 ++ .../userprofileblock/userprofileblock.jsx | 2 +- 9 files changed, 133 insertions(+), 10 deletions(-) create mode 100644 data.json create mode 100644 src/components/headerusermenu/headerusermenu.css create mode 100644 src/components/headerusermenu/headerusermenu.jsx diff --git a/data.json b/data.json new file mode 100644 index 0000000..d30bade --- /dev/null +++ b/data.json @@ -0,0 +1,16 @@ +{ + "users": [ + { + "id": 1, + "name": "Никита", + "surname": "Потапов", + "birthday": "17.02.2003", + "city": "г. Ульяновск", + "avatarImg": null, + "username": "ns.potapov", + "password": "123456", + "isAdmin": true, + "status": null + } + ] +} diff --git a/package-lock.json b/package-lock.json index a6cdb06..529bacb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,10 +11,11 @@ "bootstrap": "^5.3.2", "prop-types": "^15.8.1", "react": "^18.2.0", - "react-bootstrap": "^2.9.1", + "react-bootstrap": "^2.9.2", "react-bootstrap-icons": "^1.10.3", "react-dom": "^18.2.0", - "react-router-dom": "^6.19.0" + "react-router-dom": "^6.19.0", + "universal-cookie": "^6.1.1" }, "devDependencies": { "@types/react": "^18.2.15", @@ -1109,6 +1110,11 @@ "@types/responselike": "^1.0.0" } }, + "node_modules/@types/cookie": { + "version": "0.5.4", + "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.5.4.tgz", + "integrity": "sha512-7z/eR6O859gyWIAjuvBWFzNURmf2oPBmJlfVWkwehU5nzIyjwBsTh7WMmEEV4JFnHuQ3ex4oyTvfKzcyJVDBNA==" + }, "node_modules/@types/http-cache-semantics": { "version": "4.0.4", "resolved": "https://registry.npmjs.org/@types/http-cache-semantics/-/http-cache-semantics-4.0.4.tgz", @@ -2047,7 +2053,6 @@ "version": "0.5.0", "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz", "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==", - "dev": true, "engines": { "node": ">= 0.6" } @@ -6026,9 +6031,9 @@ } }, "node_modules/react-bootstrap": { - "version": "2.9.1", - "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.9.1.tgz", - "integrity": "sha512-ezgmh/ARCYp18LbZEqPp0ppvy+ytCmycDORqc8vXSKYV3cer4VH7OReV8uMOoKXmYzivJTxgzGHalGrHamryHA==", + "version": "2.9.2", + "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.9.2.tgz", + "integrity": "sha512-a36B+EHsAI/aH+ZhXNILBFnqscE3zr10dWmjBmfhIb2QR7KSXJiGzYd6Faf/25G8G7/CP9TCL2B0WhUBOD2UBQ==", "dependencies": { "@babel/runtime": "^7.22.5", "@restart/hooks": "^0.4.9", @@ -7190,6 +7195,15 @@ "node": ">=4" } }, + "node_modules/universal-cookie": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-6.1.1.tgz", + "integrity": "sha512-33S9x3CpdUnnjwTNs2Fgc41WGve2tdLtvaK2kPSbZRc5pGpz2vQFbRWMxlATsxNNe/Cy8SzmnmbuBM85jpZPtA==", + "dependencies": { + "@types/cookie": "^0.5.1", + "cookie": "^0.5.0" + } + }, "node_modules/universalify": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", diff --git a/package.json b/package.json index 20d2f85..7343770 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,8 @@ "type": "module", "scripts": { "start": "vite", - "dev": "npm-run-all --parallel start", + "fake-server": "json-server -p 8081 -w data.json", + "dev": "npm-run-all --parallel start fake-server", "serve": "http-server -p 80 ./dist/", "build": "vite build", "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", @@ -16,10 +17,11 @@ "bootstrap": "^5.3.2", "prop-types": "^15.8.1", "react": "^18.2.0", - "react-bootstrap": "^2.9.1", + "react-bootstrap": "^2.9.2", "react-bootstrap-icons": "^1.10.3", "react-dom": "^18.2.0", - "react-router-dom": "^6.19.0" + "react-router-dom": "^6.19.0", + "universal-cookie": "^6.1.1" }, "devDependencies": { "@types/react": "^18.2.15", diff --git a/src/components/header/header.jsx b/src/components/header/header.jsx index 116166b..d1dcc85 100644 --- a/src/components/header/header.jsx +++ b/src/components/header/header.jsx @@ -1,6 +1,7 @@ import PropTypes from 'prop-types'; import { Container, Navbar } from 'react-bootstrap'; import { Link, useLocation } from 'react-router-dom'; +import HeaderUserMenu from '../headerusermenu/headerusermenu.jsx'; import './header.css'; const Header = ({ routes }) => { @@ -19,6 +20,7 @@ const Header = ({ routes }) => { неконтакте +
{currentPage.title} diff --git a/src/components/headerusermenu/headerusermenu.css b/src/components/headerusermenu/headerusermenu.css new file mode 100644 index 0000000..7e9f01f --- /dev/null +++ b/src/components/headerusermenu/headerusermenu.css @@ -0,0 +1,29 @@ +.headerusermenu__dropdown * { + --bs-dropdown-bg: var(--dark-background-color); + z-index: 1000; +} + +.headerusermenu__dropdown .dropdown-toggle { + --bs-btn-bg: var(--dark-background-color); + --bs-btn-border-color: var(--dark-background-color); + --bs-btn-hover-border-color: var(--light-background-color); + --bs-btn-hover-bg: var(--dark-background-color); + --bs-btn-active-bg: var(--bs-btn-hover-bg); + --bs-btn-active-border-color: var(--light-background-colorr); + z-index: 1000; +} + +.headerusermenu__dropdownitem:hover svg { + fill: black; +} + +@media (prefers-color-scheme: dark) { + .headerusermenu__dropdown .dropdown-toggle { + --bs-btn-bg: var(--light-background-color); + --bs-btn-border-color: var(--light-background-color); + --bs-btn-hover-border-color: var(--alternative-font-color); + --bs-btn-hover-bg: var(--light-background-color); + --bs-btn-active-bg: var(--bs-btn-hover-bg); + --bs-btn-active-border-color: var(--alternative-font-color); + } +} \ No newline at end of file diff --git a/src/components/headerusermenu/headerusermenu.jsx b/src/components/headerusermenu/headerusermenu.jsx new file mode 100644 index 0000000..7d3b32b --- /dev/null +++ b/src/components/headerusermenu/headerusermenu.jsx @@ -0,0 +1,52 @@ +import { Dropdown } from 'react-bootstrap'; +import PropTypes from "prop-types"; +import React from 'react'; +import { Person, Gear, BoxArrowRight } from 'react-bootstrap-icons'; + +import './headerusermenu.css'; + +// eslint-disable-next-line react/display-name +const CustomToggle = React.forwardRef(({ children, onClick }, ref) => ( + { + e.preventDefault(); + onClick(e); + }} + className='btn dropdown-toggle d-flex align-items-center' + > + {children} + +)); + +CustomToggle.propTypes = { + children: PropTypes.node, + onClick: PropTypes.func +}; + +const HeaderUserMenu = () => { + return ( + + + +
+ Никита Потапов +
+ + + + Моя страница + + + Настройки + + + Выход + + + + ); +}; + +export default HeaderUserMenu; diff --git a/src/components/postinputform/postinputform.css b/src/components/postinputform/postinputform.css index cbae08a..c30e082 100644 --- a/src/components/postinputform/postinputform.css +++ b/src/components/postinputform/postinputform.css @@ -9,4 +9,9 @@ #post-publication-button { --bs-btn-bg: var(--dark-background-color); --bs-btn-border-color: var(--dark-background-color); + --bs-btn-hover-bg: var(--light-background-color); + --bs-btn-hover-color: var(--alternative-font-color); + --bs-btn-hover-border-color: var(--alternative-font-color); + --bs-btn-active-bg: var(--light-background-color); + --bs-btn-active-border-color: var(--alternative-font-color); } \ No newline at end of file diff --git a/src/components/userprofileblock/userprofileblock.css b/src/components/userprofileblock/userprofileblock.css index e69de29..f4d7b00 100644 --- a/src/components/userprofileblock/userprofileblock.css +++ b/src/components/userprofileblock/userprofileblock.css @@ -0,0 +1,3 @@ +.user-profile { + --bs-border-color: var(--alternative-font-color); +} \ No newline at end of file diff --git a/src/components/userprofileblock/userprofileblock.jsx b/src/components/userprofileblock/userprofileblock.jsx index 7a7179c..b6df5e4 100644 --- a/src/components/userprofileblock/userprofileblock.jsx +++ b/src/components/userprofileblock/userprofileblock.jsx @@ -4,7 +4,7 @@ import { People, Calendar as Calendar, GeoAlt } from 'react-bootstrap-icons'; const UserProfileBlock = () => { return ( <> -
+