diff --git a/src/App.js b/src/App.js index da208d5..a4eca87 100644 --- a/src/App.js +++ b/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 ? (
-
{ + 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 ( +
+ + {isOpen && (

Меню

    @@ -40,6 +50,8 @@ const Sidebar = ({ onSelectTab, activeTab, onLogout }) => { Выйти
+ )} +
); }; diff --git a/src/Sidebar.scss b/src/Sidebar.scss new file mode 100644 index 0000000..92b9bdb --- /dev/null +++ b/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; // Цвет фона при наведении + } + } + \ No newline at end of file