From a19c20b02fbeba627e100b205255ad8e5f02155a Mon Sep 17 00:00:00 2001
From: gotika <sonya.gotika@mail.ru>
Date: Fri, 27 Sep 2024 17:48:10 +0300
Subject: [PATCH] =?UTF-8?q?=D0=BB=D0=BE=D0=B3=D0=B8=D0=BD=20=D0=B5=D0=B1?=
 =?UTF-8?q?=D1=83=D1=87=D0=B8=D0=B9=20=D0=B4=D0=BE=D0=B4=D0=B5=D0=BB=D0=B0?=
 =?UTF-8?q?=D0=BD=20=D0=B3=D0=BB=D0=B8=D1=81=D1=82=20=D0=B2=D1=8B=D1=80?=
 =?UTF-8?q?=D0=BE=D1=81=20=D1=82=D0=B5=D0=BF=D0=B5=D1=80=D1=8C=20=D0=BE?=
 =?UTF-8?q?=D0=BD=20=D0=B1=D0=BE=D0=BB=D1=8C=D1=88=D0=BE=D0=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.js      | 63 ++++++++++++++++++++++++++++++++-----------------
 src/Sidebar.css | 38 +++++++++++++++++------------
 src/Sidebar.js  | 19 ++++++++-------
 3 files changed, 75 insertions(+), 45 deletions(-)

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 <Login onLogin={handleLogin} />; // Показываем страницу логина
-  }
-
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
-      <div style={{ display: 'flex', flex: 1 }}>
-        <Sidebar onSelectTab={setActiveTab} activeTab={activeTab} onLogout={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>
+    <Router>
+      <Routes>
+        <Route 
+          path="/login" 
+          element={isLoggedIn ? <Navigate to="/app" /> : <Login onLogin={handleLogin} />}
+        />
+        <Route 
+          path="/app" 
+          element={isLoggedIn ? (
+            <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
+              <div style={{ display: 'flex', flex: 1 }}>
+                <Sidebar 
+                  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>
   );
 };
 
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 }) => {
         <li className={activeTab === 'account' ? 'active' : ''} onClick={toggleSubMenu}>
           Аккаунт пользователя
         </li>
-        {isSubMenuOpen && ( // Dropdown menu
+        {isSubMenuOpen && (
           <>
             <li className={activeTab === 'groups' ? 'active' : ''} onClick={() => onSelectTab('groups')}>
               Группы устройств
@@ -32,10 +35,10 @@ const Sidebar = ({ onSelectTab, activeTab, onLogout }) => {
             </li>
           </>
         )}
-        <li className="logout" onClick={onLogout}>
-          Выйти
-        </li>
       </ul>
+      <button className="logout-button" onClick={onLogout}>
+        Выйти
+      </button>
     </div>
   );
 };