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 */} + + Menu + + } + sx={{ width: "100%" }} + > + {menu.map((item) => ( + navigate(`/${item.path}`)} + sx={{ + gap: theme.gap.medium, + borderRadius: `${theme.shape.borderRadius}px`, + }} + > + {item.icon} + {item.name} + + ))} + + {/* other */} + + Other + + } + sx={{ width: "100%" }} + > + {other.map((item) => ( + + 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`, + }} + > + {item.icon} + {item.name} + + ))} + ))} + {/* {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 @@ - +