все

src/App.js

@@ -10,7 +10,7 @@ import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-d
 const App = () => {
   const [isLoggedIn, setIsLoggedIn] = useState(false);  // Статус авторизации
   const [activeTab, setActiveTab] = useState('map'); // По умолчанию активная вкладка "Карта"
-  const [isSidebarOpen, setIsSidebarOpen] = useState(true);  // Управление отображением панели
+  const [isSidebarOpen] = useState(true);  // Управление отображением панели
 
   // Функция для выхода из системы
   const handleLogout = () => {
@@ -28,12 +28,6 @@ const App = () => {
           path="/app" 
           element={isLoggedIn ? (
             <div className="app-container">
-              <button 
-                className="menu-toggle-button"
-                onClick={() => setIsSidebarOpen(!isSidebarOpen)}
-              >
-                {isSidebarOpen ? 'Скрыть меню' : 'Показать меню'}
-              </button>
               <div className={`sidebar-container ${isSidebarOpen ? 'open' : 'closed'}`}>
                 <Sidebar 
                   onSelectTab={setActiveTab} 

src/Sidebar.css

@@ -1,58 +0,0 @@
-.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,7 +1,8 @@
 import React, { useState } from 'react';
-import './Sidebar.css';
+import './Sidebar.scss';
 
 const Sidebar = ({ onSelectTab, activeTab, onLogout }) => {
+  const [isOpen, setIsOpen] = useState(true); // Состояние для видимости боковой панели
   const [isSubMenuOpen, setIsSubMenuOpen] = useState(false);
 
   const toggleSubMenu = () => {
@@ -12,7 +13,16 @@ const Sidebar = ({ onSelectTab, activeTab, onLogout }) => {
     }
   };
 
+  const toggleSidebar = () => {
+    setIsOpen(!isOpen);
+  };
+
   return (
+     <div>
+      <button className="toggle-button" onClick={toggleSidebar}>
+        {isOpen ? 'Скрыть панель' : 'Показать панель'}
+      </button>
+      {isOpen && (
     <div className="sidebar">
       <h2>Меню</h2>
       <ul>
@@ -40,6 +50,8 @@ const Sidebar = ({ onSelectTab, activeTab, onLogout }) => {
         Выйти
       </button>
     </div>
+      )}
+    </div>
   );
 };
 

src/Sidebar.scss

@@ -0,0 +1,49 @@
+.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; // Цвет фона при наведении
+    }
+  }
+