diff --git a/Client/src/Components/Sidebar/index.css b/Client/src/Components/Sidebar/index.css
index 4840043c3..e62f67534 100644
--- a/Client/src/Components/Sidebar/index.css
+++ b/Client/src/Components/Sidebar/index.css
@@ -1,40 +1,31 @@
-aside .MuiStack-root {
- cursor: pointer;
-}
-aside > svg {
- margin: var(--env-var-spacing-2) var(--env-var-spacing-1);
-}
aside .selected-path,
+aside .MuiListItemButton-root:hover,
aside .MuiStack-root:hover {
background-color: var(--env-var-color-13);
}
-aside .MuiStack-root svg {
+aside .MuiList-root svg {
width: 20px;
height: 20px;
opacity: 0.8;
}
aside span.MuiTypography-root {
font-size: var(--env-var-font-size-medium);
- color: var(--env-var-color-5);
line-height: 1;
}
-aside .MuiStack-root:nth-last-child(3) {
- margin-top: auto;
+aside .MuiListSubheader-root {
+ font-size: var(--env-var-font-size-small);
+ font-weight: 500;
+ line-height: 1.5;
+ opacity: 0.6;
+ text-transform: uppercase;
+ margin-bottom: 5px;
}
-aside .MuiStack-root:last-child,
-aside .MuiStack-root:nth-last-child(3) {
- position: relative;
-}
-aside .MuiStack-root:last-child:before {
- content: "";
- position: absolute;
- top: -10px;
- left: 0;
- width: 100%;
- border-top: solid 1px var(--env-var-color-6);
+aside span.MuiTypography-root,
+aside .MuiListSubheader-root {
+ color: var(--env-var-color-2);
}
aside .MuiStack-root:last-child {
- margin-top: 15px;
+ margin-top: auto;
}
.sidebar-menu {
@@ -49,11 +40,6 @@ aside .MuiStack-root:last-child {
.sidebar-menu .MuiList-root {
min-width: 100px;
width: 150px;
- padding-bottom: 0;
-}
-.sidebar-menu li.MuiButtonBase-root:last-child {
- border-top: solid 1px var(--env-var-color-6);
- padding: 12px 16px;
}
.sidebar-menu li.MuiButtonBase-root {
min-height: fit-content;
diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx
index 33ccdafc9..61207c062 100644
--- a/Client/src/Components/Sidebar/index.jsx
+++ b/Client/src/Components/Sidebar/index.jsx
@@ -1,12 +1,22 @@
import { useState } from "react";
-import { Menu, MenuItem, Stack, Tooltip, Typography } from "@mui/material";
+import {
+ Box,
+ List,
+ ListItemButton,
+ ListItemIcon,
+ ListItemText,
+ ListSubheader,
+ Menu,
+ MenuItem,
+ Stack,
+ Tooltip,
+ Typography,
+} from "@mui/material";
import { useLocation, useNavigate } from "react-router";
import { useTheme } from "@emotion/react";
import { useDispatch, useSelector } from "react-redux";
import { clearAuthState } from "../../Features/Auth/authSlice";
import { clearUptimeMonitorState } from "../../Features/UptimeMonitors/uptimeMonitorsSlice";
-import { createToast } from "../../Utils/toastUtils";
-import axiosInstance from "../../Utils/axiosConfig";
import Avatar from "../Avatar";
import LockSvg from "../../assets/icons/lock.svg?react";
import UserSvg from "../../assets/icons/user.svg?react";
@@ -32,6 +42,9 @@ const menu = [
{ name: "Maintenance", path: "maintenance", icon: },
{ name: "Page speed", path: "pagespeed", icon: },
{ name: "Integrations", path: "integrations", icon: },
+];
+
+const other = [
{ name: "Support", path: "support", icon: },
{ name: "Settings", path: "settings", icon: },
];
@@ -108,34 +121,74 @@ function Sidebar() {
};
return (
-
-
- {menu.map((item) => (
-
- item.path === "support"
- ? window.open(
- "https://github.com/bluewave-labs/bluewave-uptime",
- "_blank",
- "noreferrer"
- )
- : navigate(`/${item.path}`)
- }
- >
- {item.icon}
- {item.name}
-
- ))}
+
+
+
+
+ {/* menu */}
+
+ {/* other */}
+
))}
+ {/* {menu.map((item) => (
+
+ item.path === "support"
+ ? window.open(
+ "https://github.com/bluewave-labs/bluewave-uptime",
+ "_blank",
+ "noreferrer"
+ )
+ : navigate(`/${item.path}`)
+ }
+ >
+ {item.icon}
+ {item.name}
+
+ ))}
+ */}
);
}
diff --git a/Client/src/assets/icons/incidents.svg b/Client/src/assets/icons/incidents.svg
index 054d96b06..ffe04d09f 100644
--- a/Client/src/assets/icons/incidents.svg
+++ b/Client/src/assets/icons/incidents.svg
@@ -1,3 +1,3 @@
diff --git a/Client/src/assets/icons/integrations.svg b/Client/src/assets/icons/integrations.svg
index 96edfb485..50e817f00 100644
--- a/Client/src/assets/icons/integrations.svg
+++ b/Client/src/assets/icons/integrations.svg
@@ -1,3 +1,3 @@
diff --git a/Client/src/assets/icons/maintenance.svg b/Client/src/assets/icons/maintenance.svg
index 6d0262f3f..9486f6086 100644
--- a/Client/src/assets/icons/maintenance.svg
+++ b/Client/src/assets/icons/maintenance.svg
@@ -1,3 +1,3 @@