src/App.js

@@ -6,55 +6,36 @@ 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 = () => {
-    setIsLoggedIn(true);  // Устанавливаем авторизацию
+    setIsAuthenticated(true); // Устанавливаем авторизацию
   };
 
+  const handleLogout = () => {
+    setIsAuthenticated(false); // Сбрасываем авторизацию
+  };
+
+  if (!isAuthenticated) {
+    return <Login onLogin={handleLogin} />; // Показываем страницу логина
+  }
+
   return (
-    <Router>
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
-      <Routes>
+      <div style={{ display: 'flex', flex: 1 }}>
-        <Route 
+        <Sidebar onSelectTab={setActiveTab} activeTab={activeTab} onLogout={handleLogout} /> {/* Передаем onLogout */}
-          path="/login" 
+        <div style={{ padding: '20px', flex: 1 }}>
-          element={isLoggedIn ? <Navigate to="/app" /> : <Login onLogin={handleLogin} />}
+          {activeTab === 'map' && <Dashboard />} {/* Подключаем компонент Dashboard */}
-        />
+          {activeTab === 'connection' && <Connections />} {/* Страница подключений */}
-        <Route 
+          {activeTab === 'account' && <UserAccount />} {/* Подключаем компонент UserAccount */}
-          path="/app" 
+          {activeTab === 'groups' && <DeviceGroups />}  {/* Группы устройств */}
-          element={isLoggedIn ? (
+          {activeTab === 'devices' && <Devices />}      {/* Устройства */}
-            <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
+        </div>
-              <div style={{ display: 'flex', flex: 1 }}>
+      </div>
-                <Sidebar 
+    </div>
-                  onSelectTab={setActiveTab} 
-                  activeTab={activeTab} 
-                  onLogout={handleLogout}  // Передаем функцию handleLogout через пропс onLogout
-                />
-                <div style={{ padding: '20px', flex: 1 }}>
-                  {activeTab === 'map' && <Dashboard />} {/* Подключаем компонент Dashboard */}
-                  {activeTab === 'connection' && <Connections />} {/* Страница подключений */}
-                  {activeTab === 'account' && <UserAccount />} {/* Подключаем компонент UserAccount */}
-                  {activeTab === 'groups' && <DeviceGroups />}  {/* Группы устройств */}
-                  {activeTab === 'devices' && <Devices />}      {/* Устройства */}
-                </div>
-              </div>
-            </div>
-          ) : (
-            <Navigate to="/login" />
-          )}
-        />
-        {/* Перенаправляем на /login по умолчанию */}
-        <Route path="*" element={<Navigate to="/login" />} />
-      </Routes>
-    </Router>
   );
 };
 

src/Sidebar.css

@@ -17,6 +17,21 @@
   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;
@@ -32,27 +47,4 @@
 .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;
 }

src/Sidebar.js

@@ -1,15 +1,12 @@
-import React, { useState } from 'react';
+import React, { useState } from 'react';  // Ensure useState is imported
-import './Sidebar.css';
+import './Sidebar.css';  // Change this to Sidebar.scss if using SCSS
 
 const Sidebar = ({ onSelectTab, activeTab, onLogout }) => {
-  const [isSubMenuOpen, setIsSubMenuOpen] = useState(false);
+  const [isSubMenuOpen, setIsSubMenuOpen] = useState(false); // For managing dropdown items
 
   const toggleSubMenu = () => {
     setIsSubMenuOpen(!isSubMenuOpen);
-    // Переключение на вкладку "Аккаунт пользователя"
+    onSelectTab('account'); // Keep the logic to display the account when clicking on "Аккаунт пользователя"
-    if (!isSubMenuOpen) {
-      onSelectTab('account');
-    }
   };
 
   return (
@@ -25,7 +22,7 @@ const Sidebar = ({ onSelectTab, activeTab, onLogout }) => {
         <li className={activeTab === 'account' ? 'active' : ''} onClick={toggleSubMenu}>
           Аккаунт пользователя
         </li>
-        {isSubMenuOpen && (
+        {isSubMenuOpen && ( // Dropdown menu
           <>
             <li className={activeTab === 'groups' ? 'active' : ''} onClick={() => onSelectTab('groups')}>
               Группы устройств
@@ -35,10 +32,10 @@ const Sidebar = ({ onSelectTab, activeTab, onLogout }) => {
             </li>
           </>
         )}
+        <li className="logout" onClick={onLogout}>
+          Выйти
+        </li>
       </ul>
-      <button className="logout-button" onClick={onLogout}>
-        Выйти
-      </button>
     </div>
   );
 };