Стилевые доработки кнопок

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
+        }
+    ]
+}

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",
+            "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": {
                 "@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",

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",

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 }) => {
                             неконтакте
                         </span>
                     </Navbar.Brand>
+                    <HeaderUserMenu />
                 </Container>
                 <div className='page-title position-absolute w-100 text-center'>
                     {currentPage.title}

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);
+    }
+}

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) => (
+	<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; 

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);
 }

src/components/userprofileblock/userprofileblock.css

@@ -0,0 +1,3 @@
+.user-profile {
+    --bs-border-color: var(--alternative-font-color);
+}

src/components/userprofileblock/userprofileblock.jsx

@@ -4,7 +4,7 @@ import { People, Calendar as Calendar, GeoAlt } from 'react-bootstrap-icons';
 const UserProfileBlock = () => {
     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'>
                     <img src="/src/assets/gachi.jpg" className="user-photo rounded-2 img-fluid" />
                 </div>