73 lines
2.5 KiB
React
73 lines
2.5 KiB
React
import { Stack, Typography } from "@mui/material";
|
|
import { useLocation, useNavigate } from "react-router";
|
|
import { useTheme } from "@emotion/react";
|
|
|
|
import BWULogo from "../../assets/Images/bwl-logo.svg?react";
|
|
import Support from "../../assets/icons/support.svg?react";
|
|
import StatusPages from "../../assets/icons/status-pages.svg?react";
|
|
import Maintenance from "../../assets/icons/maintenance.svg?react";
|
|
import Monitors from "../../assets/icons/monitors.svg?react";
|
|
import Incidents from "../../assets/icons/incidents.svg?react";
|
|
import Integrations from "../../assets/icons/integrations.svg?react";
|
|
import PageSpeed from "../../assets/icons/page-speed.svg?react";
|
|
import Settings from "../../assets/icons/settings.svg?react";
|
|
|
|
import "./index.css";
|
|
|
|
/**
|
|
* @component
|
|
* Sidebar component serves as a sidebar containing a menu.
|
|
*
|
|
* @returns {JSX.Element} The JSX element representing the Sidebar component.
|
|
*/
|
|
|
|
const menu = [
|
|
{ name: "Monitors", path: "monitors", icon: <Monitors /> },
|
|
{ name: "Incidents", path: "incidents", icon: <Incidents /> },
|
|
{ name: "Status pages", path: "status", icon: <StatusPages /> },
|
|
{ name: "Maintenance", path: "maintenance", icon: <Maintenance /> },
|
|
{ name: "Page speed", path: "page-speed", icon: <PageSpeed /> },
|
|
{ name: "Integrations", path: "integrations", icon: <Integrations /> },
|
|
{ name: "Support", path: "support", icon: <Support /> },
|
|
{ name: "Settings", path: "settings", icon: <Settings /> },
|
|
];
|
|
|
|
function Sidebar() {
|
|
const theme = useTheme();
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
|
|
return (
|
|
<Stack component="aside" gap={theme.gap.xs}>
|
|
<BWULogo alt="BlueWave Uptime Logo" />
|
|
{menu.map((item) => (
|
|
<Stack
|
|
className={
|
|
location.pathname.includes(item.path) ? "selected-path" : ""
|
|
}
|
|
key={item.path}
|
|
direction="row"
|
|
alignItems="center"
|
|
gap={theme.gap.small}
|
|
borderRadius={`${theme.shape.borderRadius}px`}
|
|
onClick={() =>
|
|
item.path === "support"
|
|
? window.open(
|
|
"https://github.com/bluewave-labs/bluewave-uptime",
|
|
"_blank",
|
|
"noreferrer"
|
|
)
|
|
: navigate(`/${item.path}`)
|
|
}
|
|
sx={{ p: `${theme.gap.small} ${theme.gap.medium}` }}
|
|
>
|
|
{item.icon}
|
|
<Typography component="span">{item.name}</Typography>
|
|
</Stack>
|
|
))}
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
export default Sidebar;
|