Стилевые доработки кнопок
This commit is contained in:
parent
90c378115d
commit
a55fd6bc39
16
data.json
Normal file
16
data.json
Normal file
@ -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
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
26
package-lock.json
generated
26
package-lock.json
generated
@ -11,10 +11,11 @@
|
|||||||
"bootstrap": "^5.3.2",
|
"bootstrap": "^5.3.2",
|
||||||
"prop-types": "^15.8.1",
|
"prop-types": "^15.8.1",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-bootstrap": "^2.9.1",
|
"react-bootstrap": "^2.9.2",
|
||||||
"react-bootstrap-icons": "^1.10.3",
|
"react-bootstrap-icons": "^1.10.3",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-router-dom": "^6.19.0"
|
"react-router-dom": "^6.19.0",
|
||||||
|
"universal-cookie": "^6.1.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/react": "^18.2.15",
|
"@types/react": "^18.2.15",
|
||||||
@ -1109,6 +1110,11 @@
|
|||||||
"@types/responselike": "^1.0.0"
|
"@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": {
|
"node_modules/@types/http-cache-semantics": {
|
||||||
"version": "4.0.4",
|
"version": "4.0.4",
|
||||||
"resolved": "https://registry.npmjs.org/@types/http-cache-semantics/-/http-cache-semantics-4.0.4.tgz",
|
"resolved": "https://registry.npmjs.org/@types/http-cache-semantics/-/http-cache-semantics-4.0.4.tgz",
|
||||||
@ -2047,7 +2053,6 @@
|
|||||||
"version": "0.5.0",
|
"version": "0.5.0",
|
||||||
"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
|
"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
|
||||||
"integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
|
"integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
|
||||||
"dev": true,
|
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">= 0.6"
|
"node": ">= 0.6"
|
||||||
}
|
}
|
||||||
@ -6026,9 +6031,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/react-bootstrap": {
|
"node_modules/react-bootstrap": {
|
||||||
"version": "2.9.1",
|
"version": "2.9.2",
|
||||||
"resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.9.1.tgz",
|
"resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.9.2.tgz",
|
||||||
"integrity": "sha512-ezgmh/ARCYp18LbZEqPp0ppvy+ytCmycDORqc8vXSKYV3cer4VH7OReV8uMOoKXmYzivJTxgzGHalGrHamryHA==",
|
"integrity": "sha512-a36B+EHsAI/aH+ZhXNILBFnqscE3zr10dWmjBmfhIb2QR7KSXJiGzYd6Faf/25G8G7/CP9TCL2B0WhUBOD2UBQ==",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/runtime": "^7.22.5",
|
"@babel/runtime": "^7.22.5",
|
||||||
"@restart/hooks": "^0.4.9",
|
"@restart/hooks": "^0.4.9",
|
||||||
@ -7190,6 +7195,15 @@
|
|||||||
"node": ">=4"
|
"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": {
|
"node_modules/universalify": {
|
||||||
"version": "0.1.2",
|
"version": "0.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
|
||||||
|
@ -5,7 +5,8 @@
|
|||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "vite",
|
"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/",
|
"serve": "http-server -p 80 ./dist/",
|
||||||
"build": "vite build",
|
"build": "vite build",
|
||||||
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
|
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
|
||||||
@ -16,10 +17,11 @@
|
|||||||
"bootstrap": "^5.3.2",
|
"bootstrap": "^5.3.2",
|
||||||
"prop-types": "^15.8.1",
|
"prop-types": "^15.8.1",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-bootstrap": "^2.9.1",
|
"react-bootstrap": "^2.9.2",
|
||||||
"react-bootstrap-icons": "^1.10.3",
|
"react-bootstrap-icons": "^1.10.3",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-router-dom": "^6.19.0"
|
"react-router-dom": "^6.19.0",
|
||||||
|
"universal-cookie": "^6.1.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/react": "^18.2.15",
|
"@types/react": "^18.2.15",
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { Container, Navbar } from 'react-bootstrap';
|
import { Container, Navbar } from 'react-bootstrap';
|
||||||
import { Link, useLocation } from 'react-router-dom';
|
import { Link, useLocation } from 'react-router-dom';
|
||||||
|
import HeaderUserMenu from '../headerusermenu/headerusermenu.jsx';
|
||||||
import './header.css';
|
import './header.css';
|
||||||
|
|
||||||
const Header = ({ routes }) => {
|
const Header = ({ routes }) => {
|
||||||
@ -19,6 +20,7 @@ const Header = ({ routes }) => {
|
|||||||
неконтакте
|
неконтакте
|
||||||
</span>
|
</span>
|
||||||
</Navbar.Brand>
|
</Navbar.Brand>
|
||||||
|
<HeaderUserMenu />
|
||||||
</Container>
|
</Container>
|
||||||
<div className='page-title position-absolute w-100 text-center'>
|
<div className='page-title position-absolute w-100 text-center'>
|
||||||
{currentPage.title}
|
{currentPage.title}
|
||||||
|
29
src/components/headerusermenu/headerusermenu.css
Normal file
29
src/components/headerusermenu/headerusermenu.css
Normal file
@ -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);
|
||||||
|
}
|
||||||
|
}
|
52
src/components/headerusermenu/headerusermenu.jsx
Normal file
52
src/components/headerusermenu/headerusermenu.jsx
Normal file
@ -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) => (
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
ref={ref}
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
onClick(e);
|
||||||
|
}}
|
||||||
|
className='btn dropdown-toggle d-flex align-items-center'
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</a>
|
||||||
|
));
|
||||||
|
|
||||||
|
CustomToggle.propTypes = {
|
||||||
|
children: PropTypes.node,
|
||||||
|
onClick: PropTypes.func
|
||||||
|
};
|
||||||
|
|
||||||
|
const HeaderUserMenu = () => {
|
||||||
|
return (
|
||||||
|
<Dropdown className='headerusermenu__dropdown'>
|
||||||
|
<Dropdown.Toggle as={CustomToggle} className='d-flex align-items-center'>
|
||||||
|
<img src="/src/assets/gachi.jpg" className="user-avatar avatar-small img-fluid rounded-circle" />
|
||||||
|
<div className="post-author-name px-2 d-none d-md-block">
|
||||||
|
Никита Потапов
|
||||||
|
</div>
|
||||||
|
</Dropdown.Toggle>
|
||||||
|
<Dropdown.Menu className='dropdown-menu-end'>
|
||||||
|
<Dropdown.Item href='#' className='headerusermenu__dropdownitem d-flex align-items-center d-sm-none'>
|
||||||
|
<Person className='me-2' />Моя страница
|
||||||
|
</Dropdown.Item>
|
||||||
|
<Dropdown.Item href='#' className='headerusermenu__dropdownitem d-flex align-items-center'>
|
||||||
|
<Gear className='me-2' />Настройки
|
||||||
|
</Dropdown.Item>
|
||||||
|
<Dropdown.Item href='#' className='headerusermenu__dropdownitem d-flex align-items-center'>
|
||||||
|
<BoxArrowRight className='me-2' />Выход
|
||||||
|
</Dropdown.Item>
|
||||||
|
</Dropdown.Menu>
|
||||||
|
</Dropdown>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HeaderUserMenu;
|
@ -9,4 +9,9 @@
|
|||||||
#post-publication-button {
|
#post-publication-button {
|
||||||
--bs-btn-bg: var(--dark-background-color);
|
--bs-btn-bg: var(--dark-background-color);
|
||||||
--bs-btn-border-color: 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);
|
||||||
}
|
}
|
@ -0,0 +1,3 @@
|
|||||||
|
.user-profile {
|
||||||
|
--bs-border-color: var(--alternative-font-color);
|
||||||
|
}
|
@ -4,7 +4,7 @@ import { People, Calendar as Calendar, GeoAlt } from 'react-bootstrap-icons';
|
|||||||
const UserProfileBlock = () => {
|
const UserProfileBlock = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="user-profile p-3 mb-2 mb-sm-4 w-100 d-flex flex-column flex-sm-row border rounded-2 border-dark">
|
<div className="user-profile p-3 mb-2 mb-sm-4 w-100 d-flex flex-column flex-sm-row border rounded-2">
|
||||||
<div className='d-flex align-items-center justify-content-center me-0 me-sm-3 mb-3 mb-sm-0'>
|
<div className='d-flex align-items-center justify-content-center me-0 me-sm-3 mb-3 mb-sm-0'>
|
||||||
<img src="/src/assets/gachi.jpg" className="user-photo rounded-2 img-fluid" />
|
<img src="/src/assets/gachi.jpg" className="user-photo rounded-2 img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user