Compare commits
2 Commits
main
...
vrach_prok
Author | SHA1 | Date | |
---|---|---|---|
|
cad4496819 | ||
|
6c1f2a8bc3 |
38
src/App.css
38
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);
|
|
||||||
}
|
|
||||||
}
|
|
31
src/App.js
31
src/App.js
@ -3,55 +3,50 @@ import DeviceGroups from "./pages/DeviceGroups";
|
|||||||
import Devices from "./pages/Devices";
|
import Devices from "./pages/Devices";
|
||||||
import Sidebar from "./Sidebar";
|
import Sidebar from "./Sidebar";
|
||||||
import Dashboard from './pages/Dashboard';
|
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';
|
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
const [isLoggedIn, setIsLoggedIn] = useState(false); // Статус авторизации
|
const [isLoggedIn, setIsLoggedIn] = useState(false); // Статус авторизации
|
||||||
const [activeTab, setActiveTab] = useState('map'); // По умолчанию активная вкладка "Карта"
|
const [activeTab, setActiveTab] = useState('map'); // По умолчанию активная вкладка "Карта"
|
||||||
|
const [isSidebarOpen] = useState(true); // Управление отображением панели
|
||||||
|
|
||||||
// Функция для выхода из системы
|
// Функция для выхода из системы
|
||||||
const handleLogout = () => {
|
const handleLogout = () => {
|
||||||
setIsLoggedIn(false);
|
setIsLoggedIn(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleLogin = () => {
|
|
||||||
setIsLoggedIn(true); // Устанавливаем авторизацию
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Router>
|
<Router>
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route
|
<Route
|
||||||
path="/login"
|
path="/login"
|
||||||
element={isLoggedIn ? <Navigate to="/app" /> : <Login onLogin={handleLogin} />}
|
element={isLoggedIn ? <Navigate to="/app" /> : <Login onLogin={() => setIsLoggedIn(true)} />}
|
||||||
/>
|
/>
|
||||||
<Route
|
<Route
|
||||||
path="/app"
|
path="/app"
|
||||||
element={isLoggedIn ? (
|
element={isLoggedIn ? (
|
||||||
<div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
|
<div className="app-container">
|
||||||
<div style={{ display: 'flex', flex: 1 }}>
|
<div className={`sidebar-container ${isSidebarOpen ? 'open' : 'closed'}`}>
|
||||||
<Sidebar
|
<Sidebar
|
||||||
onSelectTab={setActiveTab}
|
onSelectTab={setActiveTab}
|
||||||
activeTab={activeTab}
|
activeTab={activeTab}
|
||||||
onLogout={handleLogout} // Передаем функцию handleLogout через пропс onLogout
|
onLogout={handleLogout}
|
||||||
/>
|
/>
|
||||||
<div style={{ padding: '20px', flex: 1 }}>
|
|
||||||
{activeTab === 'map' && <Dashboard />} {/* Подключаем компонент Dashboard */}
|
|
||||||
{activeTab === 'connection' && <Connections />} {/* Страница подключений */}
|
|
||||||
{activeTab === 'account' && <UserAccount />} {/* Подключаем компонент UserAccount */}
|
|
||||||
{activeTab === 'groups' && <DeviceGroups />} {/* Группы устройств */}
|
|
||||||
{activeTab === 'devices' && <Devices />} {/* Устройства */}
|
|
||||||
</div>
|
</div>
|
||||||
|
<div className="content">
|
||||||
|
{activeTab === 'map' && <Dashboard />}
|
||||||
|
{activeTab === 'connection' && <div>Подключение</div>}
|
||||||
|
{activeTab === 'account' && <div>Аккаунт пользователя</div>}
|
||||||
|
{activeTab === 'groups' && <DeviceGroups />}
|
||||||
|
{activeTab === 'devices' && <Devices />}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<Navigate to="/login" />
|
<Navigate to="/login" />
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
{/* Перенаправляем на /login по умолчанию */}
|
|
||||||
<Route path="*" element={<Navigate to="/login" />} />
|
<Route path="*" element={<Navigate to="/login" />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
</Router>
|
</Router>
|
||||||
|
41
src/App.scss
Normal file
41
src/App.scss
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
}
|
@ -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;
|
|
||||||
}
|
|
@ -1,7 +1,8 @@
|
|||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import './Sidebar.css';
|
import './Sidebar.scss';
|
||||||
|
|
||||||
const Sidebar = ({ onSelectTab, activeTab, onLogout }) => {
|
const Sidebar = ({ onSelectTab, activeTab, onLogout }) => {
|
||||||
|
const [isOpen, setIsOpen] = useState(true); // Состояние для видимости боковой панели
|
||||||
const [isSubMenuOpen, setIsSubMenuOpen] = useState(false);
|
const [isSubMenuOpen, setIsSubMenuOpen] = useState(false);
|
||||||
|
|
||||||
const toggleSubMenu = () => {
|
const toggleSubMenu = () => {
|
||||||
@ -12,7 +13,16 @@ const Sidebar = ({ onSelectTab, activeTab, onLogout }) => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const toggleSidebar = () => {
|
||||||
|
setIsOpen(!isOpen);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<div>
|
||||||
|
<button className="toggle-button" onClick={toggleSidebar}>
|
||||||
|
{isOpen ? 'Скрыть панель' : 'Показать панель'}
|
||||||
|
</button>
|
||||||
|
{isOpen && (
|
||||||
<div className="sidebar">
|
<div className="sidebar">
|
||||||
<h2>Меню</h2>
|
<h2>Меню</h2>
|
||||||
<ul>
|
<ul>
|
||||||
@ -40,6 +50,8 @@ const Sidebar = ({ onSelectTab, activeTab, onLogout }) => {
|
|||||||
Выйти
|
Выйти
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
49
src/Sidebar.scss
Normal file
49
src/Sidebar.scss
Normal file
@ -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; // Цвет фона при наведении
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user