Улучшил интерфейс, добавиви выделение и пойнтер для бокового меню

pull/27/head
DmitriyA 2025-03-20 03:53:16 -04:00
parent 5ec58ab476
commit 175b4f993d
2 changed files with 44 additions and 6 deletions

View File

@ -92,7 +92,7 @@ const PrometheusChart = ({ metricName }) => {
else if (range <= 86400) step = 120; else if (range <= 86400) step = 120;
else step = 300; else step = 300;
const response = await axios.get('https://192.168.2.43:3000/metrics', { const response = await axios.get('http://192.168.2.39:3000/metrics', {
params: { metric: metricName, start, end, step }, params: { metric: metricName, start, end, step },
}); });

View File

@ -30,13 +30,51 @@ const MenuItem = ({ item, onSelectItem }) => {
return ( return (
<> <>
<ListItem component="div" onClick={handleToggle}> <ListItem
component="div"
onClick={hasChildren ? handleToggle : handleOpenTab}
sx={{
cursor: "pointer", // Курсор pointer везде
"&:hover": {
backgroundColor: "#f5f5f5", // Подсветка при наведении на весь элемент
},
}}
>
<ListItemIcon> <ListItemIcon>
<div onClick={handleOpenTab} style={{ cursor: "pointer" }}> {hasChildren ? (
{hasChildren ? (isOpen ? <FolderOpen /> : <Folder />) : <Folder />} <div
</div> onClick={handleOpenTab}
style={{
cursor: "pointer",
borderRadius: "4px", // Скругление углов
padding: "4px", // Отступы для увеличения области hover
"&:hover": {
backgroundColor: "#e0e0e0", // Подсветка при наведении на иконку
},
}}
>
{isOpen ? <FolderOpen /> : <Folder />}
</div>
) : (
<div
onClick={handleOpenTab}
style={{
cursor: "pointer",
borderRadius: "4px", // Скругление углов
padding: "4px", // Отступы для увеличения области hover
"&:hover": {
backgroundColor: "#e0e0e0", // Подсветка при наведении на иконку
},
}}
>
{/* Здесь можно добавить другую иконку или оставить пустым */}
</div>
)}
</ListItemIcon> </ListItemIcon>
<ListItemText primary={item.title} /> <ListItemText
primary={item.title}
sx={{ cursor: "pointer" }} // Курсор pointer для текста
/>
{hasChildren && (isOpen ? <ExpandLess /> : <ExpandMore />)} {hasChildren && (isOpen ? <ExpandLess /> : <ExpandMore />)}
</ListItem> </ListItem>
{hasChildren && ( {hasChildren && (