46 lines
2.5 KiB
TypeScript
46 lines
2.5 KiB
TypeScript
import { useUser } from "../utils/users/UseUser.ts"; // Хук для получения информации о пользователе
|
||
import { Outlet, Link, useNavigate } from "react-router-dom"; // Композиция для маршрутизации
|
||
import React, { useEffect } from "react";
|
||
import {UserContextType} from "../types/users.ts";
|
||
|
||
export function DashboardLayout() {
|
||
const { user, logout } = useUser() as UserContextType; // Получаем данные о пользователе
|
||
const navigate = useNavigate(); // Получаем функцию для навигации
|
||
|
||
// Проверяем, есть ли пользователь, если нет, редиректим на страницу логина
|
||
useEffect(() => {
|
||
if (!user) {
|
||
navigate("/login/");
|
||
}
|
||
}, [navigate, user]);
|
||
|
||
if (!user) {
|
||
return null; // Если пользователь не найден, ничего не отображаем
|
||
}
|
||
|
||
|
||
// Определяем класс для активной ссылки
|
||
const isActive = (path: string) => window.location.pathname.includes(path)? 'selected' : 'unselected';
|
||
|
||
return (
|
||
<div className="dashboard-layout">
|
||
<div className="sidebar">
|
||
<h1 className="logo">Pro-Fi</h1>
|
||
<p className="role">{user.roleTitle || "Роль не опознана"}</p> {/* Отображаем текущую роль пользователя */}
|
||
<nav className="navigation">
|
||
<Link to="/dashboard/staff" className={isActive('/dashboard/staff')}>Штат</Link>
|
||
<Link to="/dashboard/schools" className={isActive('/dashboard/schools')}>Школы</Link>
|
||
<Link to="/dashboard/events" className={isActive('/dashboard/events')}>Мероприятия</Link>
|
||
<Link to="/dashboard/students" className={isActive('/dashboard/students')}>Студенты</Link>
|
||
<Link to="/dashboard/reports" className={isActive('/dashboard/reports')}>Отчеты</Link>
|
||
<Link to="/dashboard/partners" className={isActive('/dashboard/partners')}>Партнеры</Link>
|
||
<Link to="/admin" className={isActive('/admin')}>Админ-панель</Link>
|
||
<button onClick={logout} className="logout">Выйти</button>
|
||
</nav>
|
||
</div>
|
||
<div className="content">
|
||
<Outlet />
|
||
</div>
|
||
</div>
|
||
);
|
||
} |