From f61e935a5c3b28ef665a3158da4aa4b97c7813da Mon Sep 17 00:00:00 2001
From: gotika <sonya.gotika@mail.ru>
Date: Fri, 4 Oct 2024 00:06:07 +0300
Subject: [PATCH] =?UTF-8?q?=D1=81=D0=BB=D0=B8=D0=BB=20=D0=B2=D0=B5=D1=82?=
 =?UTF-8?q?=D0=BA=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.css      | 38 ----------------------------
 src/App.js       |  5 ++--
 src/App.scss     | 41 +++++++++++++++++++++++++++++++
 src/Sidebar.css  | 58 -------------------------------------------
 src/Sidebar.js   | 64 ++++++++++++++++++++++++++++--------------------
 src/Sidebar.scss | 48 ++++++++++++++++++++++++++++++++++++
 6 files changed, 130 insertions(+), 124 deletions(-)
 delete mode 100644 src/App.css
 create mode 100644 src/App.scss
 delete mode 100644 src/Sidebar.css
 create mode 100644 src/Sidebar.scss

diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index 74b5e05..0000000
--- a/src/App.css
+++ /dev/null
@@ -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);
-  }
-}
diff --git a/src/App.js b/src/App.js
index 14baae6..14718d2 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,5 @@
 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";
@@ -6,7 +7,7 @@ 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';
+import './App.scss';
 
 const App = () => {
   const [isLoggedIn, setIsLoggedIn] = useState(false);  // Статус авторизации
@@ -31,7 +32,7 @@ const App = () => {
         <Route 
           path="/app" 
           element={isLoggedIn ? (
-            <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
+            <div className="app-container" style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
               <div style={{ display: 'flex', flex: 1 }}>
                 <Sidebar 
                   onSelectTab={setActiveTab} 
diff --git a/src/App.scss b/src/App.scss
new file mode 100644
index 0000000..a994852
--- /dev/null
+++ b/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;
+  }
+}
\ No newline at end of file
diff --git a/src/Sidebar.css b/src/Sidebar.css
deleted file mode 100644
index 430d8dd..0000000
--- a/src/Sidebar.css
+++ /dev/null
@@ -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;
-}
\ No newline at end of file
diff --git a/src/Sidebar.js b/src/Sidebar.js
index 0c66066..3a54ebd 100644
--- a/src/Sidebar.js
+++ b/src/Sidebar.js
@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
-import './Sidebar.css';
+import './Sidebar.scss'; // Keep your original styling file, if necessary
 
 const Sidebar = ({ onSelectTab, activeTab, onLogout }) => {
+  const [isOpen, setIsOpen] = useState(true); // Состояние для видимости боковой панели
   const [isSubMenuOpen, setIsSubMenuOpen] = useState(false);
 
   const toggleSubMenu = () => {
@@ -12,33 +13,44 @@ const Sidebar = ({ onSelectTab, activeTab, onLogout }) => {
     }
   };
 
+  const toggleSidebar = () => {
+    setIsOpen(!isOpen);
+  };
+
   return (
-    <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}>
-        Выйти
+    <div>
+      <button className="toggle-button" onClick={toggleSidebar}>
+        {isOpen ? 'Скрыть панель' : 'Показать панель'}
       </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>
   );
 };
diff --git a/src/Sidebar.scss b/src/Sidebar.scss
new file mode 100644
index 0000000..f24a1eb
--- /dev/null
+++ b/src/Sidebar.scss
@@ -0,0 +1,48 @@
+.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; // Цвет фона при наведении
+  }
+}
\ No newline at end of file
-- 
2.45.2