diff --git a/src/App.js b/src/App.js
index 40ed20d..14baae6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,36 +6,55 @@ import Dashboard from './pages/Dashboard';
import UserAccount from './pages/UserAccount'; // Импортируем компонент UserAccount
import Login from './pages/Login'; // Импортируем страницу логина
import Connections from './pages/Connections'; // Импортируем страницу подключений
+import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
const App = () => {
+ const [isLoggedIn, setIsLoggedIn] = useState(false); // Статус авторизации
const [activeTab, setActiveTab] = useState('map'); // По умолчанию активная вкладка "Карта"
- const [isAuthenticated, setIsAuthenticated] = useState(false); // Статус авторизации
+
+ // Функция для выхода из системы
+ const handleLogout = () => {
+ setIsLoggedIn(false);
+ };
const handleLogin = () => {
- setIsAuthenticated(true); // Устанавливаем авторизацию
+ setIsLoggedIn(true); // Устанавливаем авторизацию
};
- const handleLogout = () => {
- setIsAuthenticated(false); // Сбрасываем авторизацию
- };
-
- if (!isAuthenticated) {
- return ; // Показываем страницу логина
- }
-
return (
-
-
-
{/* Передаем onLogout */}
-
- {activeTab === 'map' && } {/* Подключаем компонент Dashboard */}
- {activeTab === 'connection' && } {/* Страница подключений */}
- {activeTab === 'account' && } {/* Подключаем компонент UserAccount */}
- {activeTab === 'groups' && } {/* Группы устройств */}
- {activeTab === 'devices' && } {/* Устройства */}
-
-
-
+
+
+ : }
+ />
+
+
+
+
+ {activeTab === 'map' && } {/* Подключаем компонент Dashboard */}
+ {activeTab === 'connection' && } {/* Страница подключений */}
+ {activeTab === 'account' && } {/* Подключаем компонент UserAccount */}
+ {activeTab === 'groups' && } {/* Группы устройств */}
+ {activeTab === 'devices' && } {/* Устройства */}
+
+
+
+ ) : (
+
+ )}
+ />
+ {/* Перенаправляем на /login по умолчанию */}
+ } />
+
+
);
};
diff --git a/src/Sidebar.css b/src/Sidebar.css
index 60f8b09..430d8dd 100644
--- a/src/Sidebar.css
+++ b/src/Sidebar.css
@@ -17,21 +17,6 @@
padding: 0;
}
-.sidebar li {
- margin: 15px 0;
- cursor: pointer;
-}
-
-.sidebar li:hover {
- background-color: #34495e;
- padding: 10px;
- border-radius: 5px;
-}
-.sidebar ul {
- list-style-type: none;
- padding: 0;
-}
-
.sidebar li {
margin: 15px 0;
cursor: pointer;
@@ -47,4 +32,27 @@
.sidebar li.active {
background-color: #2980b9;
color: white;
+}
+
+/* Стили для кнопки "Выйти" */
+.logout-button {
+ display: block;
+ margin-top: 20px;
+ padding: 10px;
+ width: 100%;
+ background-color: #e74c3c;
+ color: white;
+ border: none;
+ border-radius: 5px;
+ text-align: center;
+ cursor: pointer;
+ transition: background-color 0.3s;
+}
+
+.logout-button:hover {
+ background-color: #c0392b;
+}
+
+.logout-button:focus {
+ outline: none;
}
\ No newline at end of file
diff --git a/src/Sidebar.js b/src/Sidebar.js
index e5304f2..0c66066 100644
--- a/src/Sidebar.js
+++ b/src/Sidebar.js
@@ -1,12 +1,15 @@
-import React, { useState } from 'react'; // Ensure useState is imported
-import './Sidebar.css'; // Change this to Sidebar.scss if using SCSS
+import React, { useState } from 'react';
+import './Sidebar.css';
const Sidebar = ({ onSelectTab, activeTab, onLogout }) => {
- const [isSubMenuOpen, setIsSubMenuOpen] = useState(false); // For managing dropdown items
+ const [isSubMenuOpen, setIsSubMenuOpen] = useState(false);
const toggleSubMenu = () => {
setIsSubMenuOpen(!isSubMenuOpen);
- onSelectTab('account'); // Keep the logic to display the account when clicking on "Аккаунт пользователя"
+ // Переключение на вкладку "Аккаунт пользователя"
+ if (!isSubMenuOpen) {
+ onSelectTab('account');
+ }
};
return (
@@ -22,7 +25,7 @@ const Sidebar = ({ onSelectTab, activeTab, onLogout }) => {
Аккаунт пользователя
- {isSubMenuOpen && ( // Dropdown menu
+ {isSubMenuOpen && (
<>
onSelectTab('groups')}>
Группы устройств
@@ -32,10 +35,10 @@ const Sidebar = ({ onSelectTab, activeTab, onLogout }) => {
>
)}
-
- Выйти
-
+
);
};