ya ystal

src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.js

@@ -3,59 +3,60 @@ import DeviceGroups from "./pages/DeviceGroups";
 import Devices from "./pages/Devices";
 import Sidebar from "./Sidebar";
 import Dashboard from './pages/Dashboard';
-import UserAccount from './pages/UserAccount';  // Импортируем компонент UserAccount
+import Login from './pages/Login';
-import Login from './pages/Login';  // Импортируем страницу логина
+import './App.scss';
-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 [isSidebarOpen, setIsSidebarOpen] = useState(true);  // Управление отображением панели
 
   // Функция для выхода из системы
   const handleLogout = () => {
     setIsLoggedIn(false);
   };
 
-  const handleLogin = () => {
-    setIsLoggedIn(true);  // Устанавливаем авторизацию
-  };
-
   return (
     <Router>
       <Routes>
         <Route 
           path="/login" 
-          element={isLoggedIn ? <Navigate to="/app" /> : <Login onLogin={handleLogin} />}
+          element={isLoggedIn ? <Navigate to="/app" /> : <Login onLogin={() => setIsLoggedIn(true)} />}
         />
         <Route 
           path="/app" 
           element={isLoggedIn ? (
-            <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
+            <div className="app-container">
-              <div style={{ display: 'flex', flex: 1 }}>
+              <button 
+                className="menu-toggle-button"
+                onClick={() => setIsSidebarOpen(!isSidebarOpen)}
+              >
+                {isSidebarOpen ? 'Скрыть меню' : 'Показать меню'}
+              </button>
+              <div className={`sidebar-container ${isSidebarOpen ? 'open' : 'closed'}`}>
                 <Sidebar 
                   onSelectTab={setActiveTab} 
                   activeTab={activeTab} 
-                  onLogout={handleLogout}  // Передаем функцию handleLogout через пропс onLogout
+                  onLogout={handleLogout}
                 />
-                <div style={{ padding: '20px', flex: 1 }}>
+              </div>
-                  {activeTab === 'map' && <Dashboard />} {/* Подключаем компонент Dashboard */}
+              <div className="content">
-                  {activeTab === 'connection' && <Connections />} {/* Страница подключений */}
+                {activeTab === 'map' && <Dashboard />}
-                  {activeTab === 'account' && <UserAccount />} {/* Подключаем компонент UserAccount */}
+                {activeTab === 'connection' && <div>Подключение</div>}
-                  {activeTab === 'groups' && <DeviceGroups />}  {/* Группы устройств */}
+                {activeTab === 'account' && <div>Аккаунт пользователя</div>}
-                  {activeTab === 'devices' && <Devices />}      {/* Устройства */}
+                {activeTab === 'groups' && <DeviceGroups />}
-                </div>
+                {activeTab === 'devices' && <Devices />}
               </div>
             </div>
           ) : (
             <Navigate to="/login" />
           )}
         />
-        {/* Перенаправляем на /login по умолчанию */}
         <Route path="*" element={<Navigate to="/login" />} />
       </Routes>
     </Router>
   );
 };
 
-export default App;
+export default App;

src/App.scss

@@ -0,0 +1,41 @@
+.app-container {
+  display: flex;
+  height: 100vh;
+  position: relative;
+}
+
+.sidebar-container {
+  width: 250px;
+  transition: width 0.3s ease;
+  
+  &.closed {
+    width: 0;
+    overflow: hidden;
+  }
+  
+  &.open {
+    width: 250px;
+  }
+}
+
+.content {
+  flex: 1;
+  padding: 20px;
+  transition: margin-left 0.3s ease;
+}
+
+.menu-toggle-button {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  padding: 10px 15px;
+  cursor: pointer;
+  z-index: 10;
+
+  &:hover {
+    background-color: #0056b3;
+  }
+}