._.

src/components/Header.css

@@ -0,0 +1,26 @@
+.navbar {
+    justify-content: center;
+}
+
+.nav-link {
+    text-align: center;
+    width: 8rem !important;
+    margin: 0.1rem;
+    border-radius: 0.5rem !important;
+}
+
+.nav-link.active {
+    color: #ffffff !important;
+    background-color: #007bff !important;
+    border: 1px solid #007bff;
+    border-radius: 0.5rem;
+    padding: 0.5rem 1rem;
+    text-decoration: none;
+}
+
+.nav-item .btn-primary.active {
+    color: #ffffff !important;
+    background-color: #007bff !important;
+    border: 1px solid #007bff;
+    border-radius: 0.25rem;
+}

src/components/Header.jsx

@@ -1,6 +1,7 @@
 import React from "react";
-import { Link, useNavigate } from "react-router-dom";
+import { Link, NavLink, useNavigate } from "react-router-dom";
 import { useAuth } from "../AuthContext";
+import "./Header.css"; 
 
 const Header = () => {
   const { isAuthenticated, logout } = useAuth();
@@ -14,8 +15,8 @@ const Header = () => {
   };
 
   return (
-    <header className="navbar navbar-expand-lg navbar-light bg-light">
-      <div className="container-fluid">
+    <nav className="navbar navbar-expand-lg navbar-light bg-light rounded">
+      <div className="container d-flex justify-content-between align-items-center">
         <Link className="navbar-brand" to="/">
           <img
             src="delivery-icon.png"
@@ -35,72 +36,112 @@ const Header = () => {
           <span className="navbar-toggler-icon"></span>
         </button>
         <div className="collapse navbar-collapse" id="navbarNav">
-          <ul className="navbar-nav me-auto">
+          <ul className="navbar-nav mx-auto">
             <li className="nav-item">
-              <Link className="nav-link" to="/">
+              <NavLink
+                exact={"false"}
+                className="nav-link"
+                to="/"
+                activeClassName="active"
+              >
                 Заказы
-              </Link>
+              </NavLink>
             </li>
             {role === "Администратор" && (
               <>
                 <li className="nav-item">
-                  <Link className="nav-link" to="/accessories">
+                  <NavLink
+                    exact={"false"}
+                    className="nav-link"
+                    to="/accessories"
+                    activeClassName="active"
+                  >
                     Компоненты
-                  </Link>
+                  </NavLink>
                 </li>
                 <li className="nav-item">
-                  <Link className="nav-link" to="/users">
+                  <NavLink
+                    exact={"false"}
+                    className="nav-link"
+                    to="/users"
+                    activeClassName="active"
+                  >
                     Пользователи
-                  </Link>
+                  </NavLink>
                 </li>
                 <li className="nav-item">
-                  <Link className="nav-link" to="/cities">
+                  <NavLink
+                    exact={"false"}
+                    className="nav-link"
+                    to="/cities"
+                    activeClassName="active"
+                  >
                     Города
-                  </Link>
+                  </NavLink>
                 </li>
                 <li className="nav-item">
-                  <Link className="nav-link" to="/trucks">
+                  <NavLink
+                    exact={"false"}
+                    className="nav-link"
+                    to="/trucks"
+                    activeClassName="active"
+                  >
                     Грузовики
-                  </Link>
+                  </NavLink>
                 </li>
                 <li className="nav-item">
-                  <Link className="nav-link" to="/statuses">
+                  <NavLink
+                    exact={"false"}
+                    className="nav-link"
+                    to="/statuses"
+                    activeClassName="active"
+                  >
                     Статусы
-                  </Link>
+                  </NavLink>
                 </li>
                 <li className="nav-item">
-                  <Link className="nav-link" to="/federal_districts">
+                  <NavLink
+                    exact={"false"}
+                    className="nav-link"
+                    to="/federal_districts"
+                    activeClassName="active"
+                  >
                     Федеральные округа
-                  </Link>
+                  </NavLink>
                 </li>
                 <li className="nav-item">
-                  <Link className="nav-link" to="/roles">
+                  <NavLink
+                    exact={"false"}
+                    className="nav-link"
+                    to="/roles"
+                    activeClassName="active"
+                  >
                     Роли
-                  </Link>
+                  </NavLink>
                 </li>
               </>
             )}
           </ul>
-          <div className="d-flex align-items-center ml-auto">
+          <div className="d-flex align-items-center">
             {isAuthenticated ? (
               <div className="nav-item d-flex align-items-center">
-                <span className="nav-link">{user?.login}</span>{" "}
+                <span className="nav-link">{user?.login}</span>
                 <button
-                  className="btn btn-outline-danger"
+                  className="btn btn-outline-danger ml-2"
                   onClick={handleLogout}
                 >
-                  Logout
+                  Выход
                 </button>
               </div>
             ) : (
-              <Link className="btn btn-outline-primary" to="/login">
-                Login
+              <Link className="btn btn-primary" to="/login">
+                Вход
               </Link>
             )}
           </div>
         </div>
       </div>
-    </header>
+    </nav>
   );
 };
 

src/components/RoleRoute.jsx

@@ -4,12 +4,13 @@ import { useAuth } from "../AuthContext";
 
 const RoleRoute = ({ allowedRoles }) => {
   const { isAuthenticated, role } = useAuth();
+  const user = JSON.parse(localStorage.getItem("user"));
 
   if (!isAuthenticated) {
     return <Navigate to="/login" />;
   }
 
-  if (allowedRoles && !allowedRoles.includes(role)) {
+  if (allowedRoles && !allowedRoles.includes(user.role_name)) {
     return <Navigate to="/" />;
   }