._.

src/App.jsx

@@ -2,12 +2,14 @@ import React from "react";
 import RoutesComponent from "./AppRouter.jsx";
 import { AuthProvider } from "./AuthContext.jsx";
 import { BrowserRouter as Router } from "react-router-dom";
+import Header from "./components/Header.jsx";
 
 const App = () => {
   return (
     <Router>
       <AuthProvider>
         <div>
+          <Header />
           <RoutesComponent />
         </div>
       </AuthProvider>

src/components/Header.jsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { useAuth } from "../AuthContext";
+
+const Header = () => {
+  const { isAuthenticated, logout } = useAuth();
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    logout();
+    navigate("/login");
+  };
+
+  return (
+    <header className="navbar navbar-expand-lg navbar-light bg-light">
+      <div className="container-fluid">
+        <Link className="navbar-brand" to="/">
+          My App
+        </Link>
+        <div className="collapse navbar-collapse">
+          <ul className="navbar-nav me-auto">
+            <li className="nav-item">
+              <Link className="nav-link" to="/">
+                Home
+              </Link>
+            </li>
+            <li className="nav-item">
+              <Link className="nav-link" to="/accessories">
+                Accessories
+              </Link>
+            </li>
+            {/* Добавьте другие ссылки, если необходимо */}
+          </ul>
+          <div className="d-flex">
+            {isAuthenticated ? (
+              <button className="btn btn-outline-danger" onClick={handleLogout}>
+                Logout
+              </button>
+            ) : (
+              <Link className="btn btn-outline-primary" to="/login">
+                Login
+              </Link>
+            )}
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default Header;