56 lines
2.0 KiB
JavaScript
56 lines
2.0 KiB
JavaScript
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; |