85 lines
2.5 KiB
React
85 lines
2.5 KiB
React
import "./index.css";
|
|
import DashboardMenuButton from "../DashboardMenuButton";
|
|
|
|
import Monitors from "../../assets/Images/Icon-monitor-gray.png";
|
|
import Incidents from "../../assets/Images/Icon-warning-gray.png";
|
|
import SensorsIcon from "../../assets/Images/Icon-signal-gray.png";
|
|
import AllInclusiveIcon from "../../assets/Images/Icon-link-gray.png";
|
|
import MaintenanceIcon from "../../assets/Images/Icon-maintenance-gray.png";
|
|
import SettingsIcon from "../../assets/Images/Icon-setting-gray.png";
|
|
import React, { useState, useEffect } from "react";
|
|
import { useNavigate, useLocation } from "react-router-dom";
|
|
import pathMap from "../../Utils/PathMap";
|
|
|
|
/**
|
|
* @component
|
|
* DashboardMenu component displays a menu with icons and corresponding text.
|
|
* Each menu item consists of an icon and a text label.
|
|
*
|
|
* @returns {JSX.Element} The JSX element representing the DashboardMenu component.
|
|
*/
|
|
|
|
function DashboardMenu() {
|
|
const [activeButton, setActiveButton] = useState(null);
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
|
|
useEffect(() => {
|
|
setActiveButton(location.pathname);
|
|
}, [location]);
|
|
|
|
const handleClick = (title, path) => {
|
|
setActiveButton(title);
|
|
navigate(path);
|
|
};
|
|
|
|
return (
|
|
<div className="dashboard-menu-container">
|
|
{DashboardMenuButton(
|
|
Monitors,
|
|
"Monitors",
|
|
"/monitors",
|
|
activeButton === "/monitors",
|
|
() => handleClick(pathMap["/monitors"], "/monitors")
|
|
)}
|
|
{DashboardMenuButton(
|
|
Incidents,
|
|
"Incidents",
|
|
"/incidents",
|
|
activeButton === "/incidents",
|
|
() => handleClick(pathMap["/incidents"], "/incidents")
|
|
)}
|
|
{DashboardMenuButton(
|
|
SensorsIcon,
|
|
"Status Pages",
|
|
"/status",
|
|
activeButton === "/status",
|
|
() => handleClick(pathMap["/status"], "/status")
|
|
)}
|
|
{DashboardMenuButton(
|
|
AllInclusiveIcon,
|
|
"Integrations",
|
|
"/integrations",
|
|
activeButton === "/integrations",
|
|
() => handleClick(pathMap["/integrations"], "/integrations")
|
|
)}
|
|
{DashboardMenuButton(
|
|
MaintenanceIcon,
|
|
"Maintenance",
|
|
"/maintenance",
|
|
activeButton === "/maintenance",
|
|
() => handleClick(pathMap["/maintenance"], "/maintenance")
|
|
)}
|
|
{DashboardMenuButton(
|
|
SettingsIcon,
|
|
"Settings",
|
|
"/settings",
|
|
activeButton === "/settings",
|
|
() => handleClick(pathMap["/settings"], "/settings")
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default DashboardMenu;
|