fix: initial refactor

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;

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: <Maintenance /> },
   { name: "Page speed", path: "pagespeed", icon: <PageSpeed /> },
   { name: "Integrations", path: "integrations", icon: <Integrations /> },
+];
+
+const other = [
   { name: "Support", path: "support", icon: <Support /> },
   { name: "Settings", path: "settings", icon: <Settings /> },
 ];
@@ -108,34 +121,74 @@ function Sidebar() {
   };
 
   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"
-          py={theme.gap.small}
-          px={theme.gap.medium}
-          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}`)
-          }
-        >
-          {item.icon}
-          <Typography component="span">{item.name}</Typography>
-        </Stack>
-      ))}
+    <Stack component="aside" gap={theme.gap.large}>
+      <Box pt={theme.gap.large} pl={theme.gap.ml} pb={theme.gap.xs}>
+        <BWULogo alt="BlueWave Uptime Logo" />
+      </Box>
+      {/* menu */}
+      <List
+        component="nav"
+        aria-labelledby="nested-menu-subheader"
+        subheader={
+          <ListSubheader component="div" id="nested-menu-subheader">
+            Menu
+          </ListSubheader>
+        }
+        sx={{ width: "100%" }}
+      >
+        {menu.map((item) => (
+          <ListItemButton
+            className={
+              location.pathname.includes(item.path) ? "selected-path" : ""
+            }
+            key={item.path}
+            onClick={() => navigate(`/${item.path}`)}
+            sx={{
+              gap: theme.gap.medium,
+              borderRadius: `${theme.shape.borderRadius}px`,
+            }}
+          >
+            <ListItemIcon sx={{ minWidth: 0 }}>{item.icon}</ListItemIcon>
+            <ListItemText>{item.name}</ListItemText>
+          </ListItemButton>
+        ))}
+      </List>
+      {/* other */}
+      <List
+        component="nav"
+        aria-labelledby="nested-other-subheader"
+        subheader={
+          <ListSubheader component="div" id="nested-other-subheader">
+            Other
+          </ListSubheader>
+        }
+        sx={{ width: "100%" }}
+      >
+        {other.map((item) => (
+          <ListItemButton
+            className={
+              location.pathname.includes(item.path) ? "selected-path" : ""
+            }
+            key={item.path}
+            onClick={() =>
+              item.path === "support"
+                ? window.open(
+                    "https://github.com/bluewave-labs/bluewave-uptime",
+                    "_blank",
+                    "noreferrer"
+                  )
+                : navigate(`/${item.path}`)
+            }
+            sx={{
+              gap: theme.gap.medium,
+              borderRadius: `${theme.shape.borderRadius}px`,
+            }}
+          >
+            <ListItemIcon sx={{ minWidth: 0 }}>{item.icon}</ListItemIcon>
+            <ListItemText>{item.name}</ListItemText>
+          </ListItemButton>
+        ))}
+      </List>
       <Tooltip
         title="Open settings"
         slotProps={{
@@ -191,6 +244,33 @@ function Sidebar() {
           </MenuItem>
         ))}
       </Menu>
+      {/* {menu.map((item) => (
+        <Stack
+          className={
+            location.pathname.includes(item.path) ? "selected-path" : ""
+          }
+          key={item.path}
+          direction="row"
+          alignItems="center"
+          py={theme.gap.small}
+          px={theme.gap.medium}
+          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}`)
+          }
+        >
+          {item.icon}
+          <Typography component="span">{item.name}</Typography>
+        </Stack>
+      ))}
+       */}
     </Stack>
   );
 }