DashboardLayout

src/layouts/DashboardLayout.tsx

@@ -1,29 +1,46 @@
-import {useUser} from "../utils/users/UseUser.ts";
-import {Outlet, useNavigate} from "react-router-dom";
-import React, {useEffect} from "react";
+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 } = useUser();
-    const navigate = useNavigate();
+    const { user, logout } = useUser() as UserContextType; // Получаем данные о пользователе
+    const navigate = useNavigate(); // Получаем функцию для навигации
 
+    // Проверяем, есть ли пользователь, если нет, редиректим на страницу логина
     useEffect(() => {
         if (!user) {
-            navigate("/login/")
+            navigate("/login/");
         }
     }, [navigate, user]);
 
-    if (!user){
-        return null;
+    if (!user) {
+        return null; // Если пользователь не найден, ничего не отображаем
     }
 
+
+    // Определяем класс для активной ссылки
+    const isActive = (path: string) => window.location.pathname.includes(path)? 'selected' : 'unselected';
+
     return (
-        <>
-            <div className="header">
+        <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>
     );
 }