Numerum/WEB_logistics
Numerum/WEB_logistics
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

._.

Browse Source
This commit is contained in:
Андрей Дувакин 2024-10-07 18:17:24 +05:00
parent 69426b1fa3
commit 8c4c8b54a7
3 changed files with 96 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/Header.css Normal file
View File

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

95
src/components/Header.jsx
View File

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

3
src/components/RoleRoute.jsx
View File

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