first commit
commit
ffc9f82e5a
|
|
@ -0,0 +1 @@
|
|||
node_modules
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,34 @@
|
|||
{
|
||||
"name": "trust_module",
|
||||
"version": "0.1.0",
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^10.4.20",
|
||||
"postcss": "^8.5.1",
|
||||
"postcss-cli": "^11.0.0",
|
||||
"tailwindcss": "^4.0.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"cra-template": "^1.2.0",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-scripts": "^5.0.1"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>React App</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root"></div> <!-- Здесь появится наше React-приложение -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import React from "react";
|
||||
import SidebarMenu from "./components/SidebarMenu"; // Импорт компонента бокового меню
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div style={{ display: "flex" }}>
|
||||
<SidebarMenu />
|
||||
<div style={{ padding: "20px", flex: 1 }}>Рабочая область</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
/* SidebarMenu.css */
|
||||
.sidebar {
|
||||
width: 250px;
|
||||
height: 100vh;
|
||||
background-color: #333;
|
||||
color: white;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.sidebar-section {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.sidebar-button {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background-color: #444;
|
||||
border: none;
|
||||
color: white;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.sidebar-button:hover {
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
.sidebar-items {
|
||||
list-style: none;
|
||||
padding-left: 20px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.sidebar-item {
|
||||
padding: 5px 0;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.sidebar-item:hover {
|
||||
color: #ccc;
|
||||
}
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
import React, { useState } from "react";
|
||||
import "./SidebarMenu.css"; // Импортируем стили для компонента
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
title: "Выбор сервиса",
|
||||
items: ["Сервис ВКС", "Сервис 2", "Сервис 3"],
|
||||
},
|
||||
{
|
||||
title: "Функциональные задачи",
|
||||
items: ["Контроль системы", "Система управления", "Проведение ВКС", "Резервное копирование", "Ретрансляция информации"],
|
||||
},
|
||||
{
|
||||
title: "Программное обеспечение",
|
||||
items: ["ПО 1", "ПО 2", "ПО 3"],
|
||||
},
|
||||
{
|
||||
title: "Аппаратное обеспечение",
|
||||
items: ["Оборудование 1", "Оборудование 2", "Оборудование 3"],
|
||||
},
|
||||
];
|
||||
|
||||
function SidebarMenu() {
|
||||
const [openSections, setOpenSections] = useState({});
|
||||
|
||||
const toggleSection = (title) => {
|
||||
setOpenSections((prev) => ({ ...prev, [title]: !prev[title] }));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="sidebar">
|
||||
<h2 className="sidebar-title">Меню</h2>
|
||||
{menuItems.map((section) => (
|
||||
<div key={section.title} className="sidebar-section">
|
||||
<button
|
||||
onClick={() => toggleSection(section.title)}
|
||||
className="sidebar-button"
|
||||
>
|
||||
{section.title}
|
||||
</button>
|
||||
{openSections[section.title] && (
|
||||
<ul className="sidebar-items">
|
||||
{section.items.map((item) => (
|
||||
<li key={item} className="sidebar-item">
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default SidebarMenu;
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import App from "./App";
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById("root"));
|
||||
root.render(<App />);
|
||||
Loading…
Reference in New Issue