src/App.css

@@ -0,0 +1,38 @@
+.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

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
 import DeviceGroups from "./pages/DeviceGroups";
 import Devices from "./pages/Devices";
 import Sidebar from "./Sidebar";
@@ -7,7 +6,7 @@ import Dashboard from './pages/Dashboard';
 import UserAccount from './pages/UserAccount';  // Импортируем компонент UserAccount
 import Login from './pages/Login';  // Импортируем страницу логина
 import Connections from './pages/Connections';  // Импортируем страницу подключений
-import './App.scss';
+import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
 
 const App = () => {
   const [isLoggedIn, setIsLoggedIn] = useState(false);  // Статус авторизации
@@ -32,7 +31,7 @@ const App = () => {
         <Route 
           path="/app" 
           element={isLoggedIn ? (
-            <div className="app-container" style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
+            <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
               <div style={{ display: 'flex', flex: 1 }}>
                 <Sidebar 
                   onSelectTab={setActiveTab} 

src/App.scss

@@ -1,41 +0,0 @@
-.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;
-  }
-}

src/Sidebar.css

@@ -0,0 +1,58 @@
+.sidebar {
+  width: 250px;
+  height: 100vh;
+  background-color: #2c3e50;
+  color: white;
+  padding: 20px;
+  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
+}
+
+.sidebar h2 {
+  font-size: 24px;
+  margin-bottom: 20px;
+}
+
+.sidebar ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+.sidebar li {
+  margin: 15px 0;
+  cursor: pointer;
+  padding: 10px;
+  border-radius: 5px;
+  transition: background-color 0.3s;
+}
+
+.sidebar li:hover {
+  background-color: #34495e;
+}
+
+.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,8 +1,7 @@
 import React, { useState } from 'react';
-import './Sidebar.scss'; // Keep your original styling file, if necessary
+import './Sidebar.css';
 
 const Sidebar = ({ onSelectTab, activeTab, onLogout }) => {
-  const [isOpen, setIsOpen] = useState(true); // Состояние для видимости боковой панели
   const [isSubMenuOpen, setIsSubMenuOpen] = useState(false);
 
   const toggleSubMenu = () => {
@@ -13,44 +12,33 @@ const Sidebar = ({ onSelectTab, activeTab, onLogout }) => {
     }
   };
 
-  const toggleSidebar = () => {
-    setIsOpen(!isOpen);
-  };
-
   return (
-    <div>
+    <div className="sidebar">
-      <button className="toggle-button" onClick={toggleSidebar}>
+      <h2>Меню</h2>
-        {isOpen ? 'Скрыть панель' : 'Показать панель'}
+      <ul>
+        <li className={activeTab === 'map' ? 'active' : ''} onClick={() => onSelectTab('map')}>
+          Карта в реальном времени
+        </li>
+        <li className={activeTab === 'connection' ? 'active' : ''} onClick={() => onSelectTab('connection')}>
+          Подключение
+        </li>
+        <li className={activeTab === 'account' ? 'active' : ''} onClick={toggleSubMenu}>
+          Аккаунт пользователя
+        </li>
+        {isSubMenuOpen && (
+          <>
+            <li className={activeTab === 'groups' ? 'active' : ''} onClick={() => onSelectTab('groups')}>
+              Группы устройств
+            </li>
+            <li className={activeTab === 'devices' ? 'active' : ''} onClick={() => onSelectTab('devices')}>
+              Устройства
+            </li>
+          </>
+        )}
+      </ul>
+      <button className="logout-button" onClick={onLogout}>
+        Выйти
       </button>
-      {isOpen && (
-        <div className="sidebar">
-          <h2>Меню</h2>
-          <ul>
-            <li className={activeTab === 'map' ? 'active' : ''} onClick={() => onSelectTab('map')}>
-              Карта в реальном времени
-            </li>
-            <li className={activeTab === 'connection' ? 'active' : ''} onClick={() => onSelectTab('connection')}>
-              Подключение
-            </li>
-            <li className={activeTab === 'account' ? 'active' : ''} onClick={toggleSubMenu}>
-              Аккаунт пользователя
-            </li>
-            {isSubMenuOpen && (
-              <>
-                <li className={activeTab === 'groups' ? 'active' : ''} onClick={() => onSelectTab('groups')}>
-                  Группы устройств
-                </li>
-                <li className={activeTab === 'devices' ? 'active' : ''} onClick={() => onSelectTab('devices')}>
-                  Устройства
-                </li>
-              </>
-            )}
-          </ul>
-          <button className="logout-button" onClick={onLogout}>
-            Выйти
-          </button>
-        </div>
-      )}
     </div>
   );
 };

src/Sidebar.scss

@@ -1,48 +0,0 @@
-.sidebar {
-  width: 250px; // Ширина боковой панели
-  background-color: #f0f0f0; // Цвет фона
-  padding: 20px; // Отступы
-  position: fixed; // Фиксированное положение
-  top: 0; // Положение сверху
-  left: 0; // Положение слева
-  height: 100%; // Высота панели
-  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); // Тень
-  transition: transform 0.3s ease; // Анимация при открытии/закрытии
-  z-index: 1000; // Слой над другими элементами
-}
-
-.toggle-button {
-  position: fixed; // Фиксированное положение
-  top: 10px; // Отступ сверху
-  left: 10px; // Отступ слева
-  padding: 10px 15px; // Отступы кнопки
-  background-color: #007bff; // Цвет фона кнопки
-  color: white; // Цвет текста
-  border: none; // Убрать границы
-  border-radius: 5px; // Закругление углов
-  cursor: pointer; // Курсор при наведении
-  z-index: 1001; // Слой над боковой панелью
-
-  &:hover {
-    background-color: #0056b3; // Цвет фона при наведении
-  }
-}
-
-.active {
-  font-weight: bold; // Жирный текст для активного элемента
-  color: #007bff; // Цвет текста для активного элемента
-}
-
-.logout-button {
-  margin-top: 20px; // Отступ сверху
-  padding: 10px 15px; // Отступы кнопки
-  background-color: #dc3545; // Цвет фона кнопки "Выйти"
-  color: white; // Цвет текста
-  border: none; // Убрать границы
-  border-radius: 5px; // Закругление углов
-  cursor: pointer; // Курсор при наведении
-
-  &:hover {
-    background-color: #c82333; // Цвет фона при наведении
-  }
-}