From ab71fc53967d7b283a454352de3632062acee11d Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Thu, 15 Aug 2024 20:34:34 -0400 Subject: [PATCH 1/9] fix: initial refactor --- Client/src/Components/Sidebar/index.css | 40 +++---- Client/src/Components/Sidebar/index.jsx | 142 ++++++++++++++++++----- Client/src/assets/icons/incidents.svg | 2 +- Client/src/assets/icons/integrations.svg | 2 +- Client/src/assets/icons/maintenance.svg | 2 +- 5 files changed, 127 insertions(+), 61 deletions(-) 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 @@ - + From 4b4af5aa2486cd4d5fdda03104710e14327e903e Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Fri, 16 Aug 2024 11:44:47 -0400 Subject: [PATCH 2/9] fix: updated color and opacity values --- Client/src/Components/Sidebar/index.css | 20 ++++++++++++++---- Client/src/Components/Sidebar/index.jsx | 27 ------------------------- 2 files changed, 16 insertions(+), 31 deletions(-) diff --git a/Client/src/Components/Sidebar/index.css b/Client/src/Components/Sidebar/index.css index e62f67534..85ba6d226 100644 --- a/Client/src/Components/Sidebar/index.css +++ b/Client/src/Components/Sidebar/index.css @@ -6,7 +6,10 @@ aside .MuiStack-root:hover { aside .MuiList-root svg { width: 20px; height: 20px; - opacity: 0.8; + opacity: 0.9; +} +aside .MuiList-root svg path { + stroke: var(--env-var-color-2); } aside span.MuiTypography-root { font-size: var(--env-var-font-size-medium); @@ -16,13 +19,22 @@ 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; + margin-bottom: 2px; + opacity: 0.6; } aside span.MuiTypography-root, aside .MuiListSubheader-root { - color: var(--env-var-color-2); + color: var(--env-var-color-5); +} +aside .MuiListItemButton-root:not(.selected-path) > * { + opacity: 0.8; +} +aside .selected-path > * { + opacity: 1; +} +aside .selected-path span.MuiTypography-root { + font-weight: 500; } aside .MuiStack-root:last-child { margin-top: auto; diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx index 61207c062..3500b7cc1 100644 --- a/Client/src/Components/Sidebar/index.jsx +++ b/Client/src/Components/Sidebar/index.jsx @@ -244,33 +244,6 @@ function Sidebar() { ))} - {/* {menu.map((item) => ( - - item.path === "support" - ? window.open( - "https://github.com/bluewave-labs/bluewave-uptime", - "_blank", - "noreferrer" - ) - : navigate(`/${item.path}`) - } - > - {item.icon} - {item.name} - - ))} - */} ); } From d9360ee8eb2e80ff2d91adace1533f00af11ad52 Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Fri, 16 Aug 2024 12:13:05 -0400 Subject: [PATCH 3/9] fix: added nested nav list --- Client/src/Components/Sidebar/index.jsx | 170 ++++++++++++------------ Client/src/assets/icons/down-arrow.svg | 2 +- Client/src/assets/icons/up-arrow.svg | 3 + 3 files changed, 87 insertions(+), 88 deletions(-) create mode 100644 Client/src/assets/icons/up-arrow.svg diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx index 3500b7cc1..271c1072c 100644 --- a/Client/src/Components/Sidebar/index.jsx +++ b/Client/src/Components/Sidebar/index.jsx @@ -1,13 +1,12 @@ import { useState } from "react"; import { Box, + Collapse, List, ListItemButton, ListItemIcon, ListItemText, ListSubheader, - Menu, - MenuItem, Stack, Tooltip, Typography, @@ -31,17 +30,33 @@ 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 Arrow from "../../assets/icons/down-arrow.svg?react"; +import ArrowDown from "../../assets/icons/down-arrow.svg?react"; +import ArrowUp from "../../assets/icons/up-arrow.svg?react"; import "./index.css"; const menu = [ - { name: "Monitors", path: "monitors", icon: }, + { + name: "Dashboard", + icon: , + nested: [ + { name: "Monitors", path: "monitors", icon: }, + { name: "Pagespeed", path: "pagespeed", icon: }, + ], + }, { name: "Incidents", path: "incidents", icon: }, { name: "Status pages", path: "status", icon: }, { name: "Maintenance", path: "maintenance", icon: }, - { name: "Page speed", path: "pagespeed", icon: }, { name: "Integrations", path: "integrations", icon: }, + { + name: "Account", + icon: , + nested: [ + { name: "Profile", path: "account/profile", icon: }, + { name: "Password", path: "account/password", icon: }, + { name: "Team", path: "account/team", icon: }, + ], + }, ]; const other = [ @@ -49,13 +64,6 @@ const other = [ { name: "Settings", path: "settings", icon: }, ]; -const icons = { - Profile: , - Team: , - Password: , - Logout: , -}; - /** * @component * Sidebar component serves as a sidebar containing a menu. @@ -68,8 +76,8 @@ function Sidebar() { const navigate = useNavigate(); const location = useLocation(); const dispatch = useDispatch(); - const [anchorElUser, setAnchorElUser] = useState(null); const authState = useSelector((state) => state.auth); + const [open, setOpen] = useState({ Dashboard: false, Account: false }); // Initialize settings and update based on user role let settings = ["Profile", "Password", "Team", "Logout"]; @@ -77,15 +85,6 @@ function Sidebar() { settings = ["Profile", "Password", "Logout"]; } - /** - * Handles opening the user menu. - * - * @param {React.MouseEvent} event - The event triggered by clicking the user menu button. - */ - const handleOpenUserMenu = (event) => { - setAnchorElUser(event.currentTarget); - }; - /** * Handles logging out the user * @@ -97,29 +96,6 @@ function Sidebar() { navigate("/login"); }; - /** - * Handles closing the user menu. - */ - const handleCloseUserMenu = (setting) => { - setAnchorElUser(null); - switch (setting) { - case "Profile": - navigate("/account/profile"); - break; - case "Team": - navigate("/account/team"); - break; - case "Password": - navigate("/account/password"); - break; - case "Logout": - logout(); - break; - default: - break; - } - }; - return ( @@ -136,22 +112,68 @@ function Sidebar() { } sx={{ width: "100%" }} > - {menu.map((item) => ( - navigate(`/${item.path}`)} - sx={{ - gap: theme.gap.medium, - borderRadius: `${theme.shape.borderRadius}px`, - }} - > - {item.icon} - {item.name} - - ))} + {menu.map((item) => + item.path ? ( + navigate(`/${item.path}`)} + sx={{ + gap: theme.gap.medium, + borderRadius: `${theme.shape.borderRadius}px`, + }} + > + {item.icon} + {item.name} + + ) : ( + <> + + setOpen((prev) => ({ + ...prev, + [`${item.name}`]: !prev[`${item.name}`], + })) + } + sx={{ + gap: theme.gap.medium, + borderRadius: `${theme.shape.borderRadius}px`, + }} + > + {item.icon} + {item.name} + {open[`${item.name}`] ? : } + + + + {item.nested.map((child) => ( + navigate(`/${child.path}`)} + sx={{ + gap: theme.gap.medium, + borderRadius: `${theme.shape.borderRadius}px`, + }} + > + + {child.icon} + + {child.name} + + ))} + + + + ) + )} {/* other */} {authState.user?.firstName} {authState.user?.lastName} - - - {settings.map((setting) => ( - handleCloseUserMenu(setting)}> - {icons[setting]} - - {setting} - - - ))} - ); } diff --git a/Client/src/assets/icons/down-arrow.svg b/Client/src/assets/icons/down-arrow.svg index 7c6a715ed..59b4b6bc5 100644 --- a/Client/src/assets/icons/down-arrow.svg +++ b/Client/src/assets/icons/down-arrow.svg @@ -1,3 +1,3 @@ - + diff --git a/Client/src/assets/icons/up-arrow.svg b/Client/src/assets/icons/up-arrow.svg new file mode 100644 index 000000000..0f8f3bc34 --- /dev/null +++ b/Client/src/assets/icons/up-arrow.svg @@ -0,0 +1,3 @@ + + + From 01098b92f97b8c501111e1afd76b1c8a85ba58b7 Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Fri, 16 Aug 2024 12:19:03 -0400 Subject: [PATCH 4/9] fix: updated svg files --- Client/src/Components/Sidebar/index.jsx | 16 +++++++++++----- Client/src/assets/icons/dashboard.svg | 3 +++ Client/src/assets/icons/lock.svg | 2 +- Client/src/assets/icons/user-edit.svg | 3 +++ Client/src/assets/icons/user-two.svg | 2 +- Client/src/assets/icons/user.svg | 2 +- 6 files changed, 20 insertions(+), 8 deletions(-) create mode 100644 Client/src/assets/icons/dashboard.svg create mode 100644 Client/src/assets/icons/user-edit.svg diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx index 271c1072c..0de8a31a6 100644 --- a/Client/src/Components/Sidebar/index.jsx +++ b/Client/src/Components/Sidebar/index.jsx @@ -23,6 +23,8 @@ import TeamSvg from "../../assets/icons/user-two.svg?react"; import LogoutSvg from "../../assets/icons/logout.svg?react"; import BWULogo from "../../assets/Images/bwl-logo.svg?react"; import Support from "../../assets/icons/support.svg?react"; +import Dashboard from "../../assets/icons/dashboard.svg?react"; +import Account from "../../assets/icons/user-edit.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"; @@ -38,7 +40,7 @@ import "./index.css"; const menu = [ { name: "Dashboard", - icon: , + icon: , nested: [ { name: "Monitors", path: "monitors", icon: }, { name: "Pagespeed", path: "pagespeed", icon: }, @@ -50,11 +52,11 @@ const menu = [ { name: "Integrations", path: "integrations", icon: }, { name: "Account", - icon: , + icon: , nested: [ { name: "Profile", path: "account/profile", icon: }, - { name: "Password", path: "account/password", icon: }, - { name: "Team", path: "account/team", icon: }, + { name: "Password", path: "account/password", icon: }, + { name: "Team", path: "account/team", icon: }, ], }, ]; @@ -148,7 +150,11 @@ function Sidebar() { {open[`${item.name}`] ? : } - + {item.nested.map((child) => ( + + diff --git a/Client/src/assets/icons/lock.svg b/Client/src/assets/icons/lock.svg index 38e8e1df0..eb625f0ee 100644 --- a/Client/src/assets/icons/lock.svg +++ b/Client/src/assets/icons/lock.svg @@ -1,3 +1,3 @@ - + diff --git a/Client/src/assets/icons/user-edit.svg b/Client/src/assets/icons/user-edit.svg new file mode 100644 index 000000000..cbd1a252f --- /dev/null +++ b/Client/src/assets/icons/user-edit.svg @@ -0,0 +1,3 @@ + + + diff --git a/Client/src/assets/icons/user-two.svg b/Client/src/assets/icons/user-two.svg index 8e40622c3..031b22787 100644 --- a/Client/src/assets/icons/user-two.svg +++ b/Client/src/assets/icons/user-two.svg @@ -1,3 +1,3 @@ - + diff --git a/Client/src/assets/icons/user.svg b/Client/src/assets/icons/user.svg index 51e0e7b11..231c89d40 100644 --- a/Client/src/assets/icons/user.svg +++ b/Client/src/assets/icons/user.svg @@ -1,3 +1,3 @@ - + From 384f40a4b4698bfd3dc7e7761fe350e0453c27e3 Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Fri, 16 Aug 2024 12:40:15 -0400 Subject: [PATCH 5/9] fix: resolved key prop error --- Client/src/Components/Sidebar/index.css | 30 +----------- Client/src/Components/Sidebar/index.jsx | 65 +++++++++++++------------ 2 files changed, 36 insertions(+), 59 deletions(-) diff --git a/Client/src/Components/Sidebar/index.css b/Client/src/Components/Sidebar/index.css index 85ba6d226..77136ef88 100644 --- a/Client/src/Components/Sidebar/index.css +++ b/Client/src/Components/Sidebar/index.css @@ -1,6 +1,5 @@ aside .selected-path, -aside .MuiListItemButton-root:hover, -aside .MuiStack-root:hover { +aside .MuiListItemButton-root:hover { background-color: var(--env-var-color-13); } aside .MuiList-root svg { @@ -28,7 +27,7 @@ aside .MuiListSubheader-root { color: var(--env-var-color-5); } aside .MuiListItemButton-root:not(.selected-path) > * { - opacity: 0.8; + opacity: 0.9; } aside .selected-path > * { opacity: 1; @@ -39,28 +38,3 @@ aside .selected-path span.MuiTypography-root { aside .MuiStack-root:last-child { margin-top: auto; } - -.sidebar-menu { - margin-top: -20px; -} -.sidebar-menu .MuiPaper-root { - box-shadow: var(--env-var-shadow-1); - border: solid 1px var(--env-var-color-6); - border-radius: var(--env-var-radius-1); - gap: 1px; -} -.sidebar-menu .MuiList-root { - min-width: 100px; - width: 150px; -} -.sidebar-menu li.MuiButtonBase-root { - min-height: fit-content; -} -.sidebar-menu .MuiList-root svg { - width: 16px; - height: 16px; -} -.sidebar-menu span { - font-size: var(--env-var-font-size-medium); - color: var(--env-var-color-2); -} diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx index 0de8a31a6..65fedfec1 100644 --- a/Client/src/Components/Sidebar/index.jsx +++ b/Client/src/Components/Sidebar/index.jsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import React, { useState } from "react"; import { Box, Collapse, @@ -81,12 +81,6 @@ function Sidebar() { const authState = useSelector((state) => state.auth); const [open, setOpen] = useState({ Dashboard: false, Account: false }); - // Initialize settings and update based on user role - let settings = ["Profile", "Password", "Team", "Logout"]; - if (authState.user?.role && !authState.user.role.includes("admin")) { - settings = ["Profile", "Password", "Logout"]; - } - /** * Handles logging out the user * @@ -131,9 +125,8 @@ function Sidebar() { {item.name} ) : ( - <> + setOpen((prev) => ({ ...prev, @@ -149,35 +142,45 @@ function Sidebar() { {item.name} {open[`${item.name}`] ? : } - + - {item.nested.map((child) => ( - navigate(`/${child.path}`)} - sx={{ - gap: theme.gap.medium, - borderRadius: `${theme.shape.borderRadius}px`, - }} - > - - {child.icon} - - {child.name} - - ))} + {item.nested.map((child) => { + if ( + child.name === "Team" && + authState.user?.role && + !authState.user.role.includes("admin") + ) { + return null; + } + + return ( + navigate(`/${child.path}`)} + sx={{ + gap: theme.gap.medium, + borderRadius: `${theme.shape.borderRadius}px`, + }} + > + + {child.icon} + + {child.name} + + ); + })} - + ) )} From 1851508e01b471e54554991f6590c421a7555643 Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Fri, 16 Aug 2024 12:53:41 -0400 Subject: [PATCH 6/9] fix: added logout button --- Client/src/Components/Sidebar/index.css | 6 ++- Client/src/Components/Sidebar/index.jsx | 51 +++++++++++-------------- 2 files changed, 28 insertions(+), 29 deletions(-) diff --git a/Client/src/Components/Sidebar/index.css b/Client/src/Components/Sidebar/index.css index 77136ef88..3aee25b76 100644 --- a/Client/src/Components/Sidebar/index.css +++ b/Client/src/Components/Sidebar/index.css @@ -23,9 +23,13 @@ aside .MuiListSubheader-root { opacity: 0.6; } aside span.MuiTypography-root, +aside p.MuiTypography-root, aside .MuiListSubheader-root { color: var(--env-var-color-5); } +aside p.MuiTypography-root { + font-size: var(--env-var-font-size-small); +} aside .MuiListItemButton-root:not(.selected-path) > * { opacity: 0.9; } @@ -33,7 +37,7 @@ aside .selected-path > * { opacity: 1; } aside .selected-path span.MuiTypography-root { - font-weight: 500; + font-weight: 600; } aside .MuiStack-root:last-child { margin-top: auto; diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx index 65fedfec1..0e0b5e2c3 100644 --- a/Client/src/Components/Sidebar/index.jsx +++ b/Client/src/Components/Sidebar/index.jsx @@ -2,6 +2,7 @@ import React, { useState } from "react"; import { Box, Collapse, + IconButton, List, ListItemButton, ListItemIcon, @@ -106,7 +107,6 @@ function Sidebar() { Menu } - sx={{ width: "100%" }} > {menu.map((item) => item.path ? ( @@ -193,7 +193,6 @@ function Sidebar() { Other } - sx={{ width: "100%" }} > {other.map((item) => ( ))} - - - - + + + {authState.user?.firstName} {authState.user?.lastName} - - + + {authState.user?.role} + + + + + + + + ); } From e33f8f1f2701f5948bf97cf1d046e56bccdd4222 Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Fri, 16 Aug 2024 13:16:04 -0400 Subject: [PATCH 7/9] fix: added nested borders --- Client/src/Components/Sidebar/index.css | 35 +++++++++++++++++++++++++ Client/src/Components/Sidebar/index.jsx | 22 +++++++++++++--- Client/src/assets/icons/logout.svg | 2 +- 3 files changed, 54 insertions(+), 5 deletions(-) diff --git a/Client/src/Components/Sidebar/index.css b/Client/src/Components/Sidebar/index.css index 3aee25b76..4fde86bff 100644 --- a/Client/src/Components/Sidebar/index.css +++ b/Client/src/Components/Sidebar/index.css @@ -29,6 +29,7 @@ aside .MuiListSubheader-root { } aside p.MuiTypography-root { font-size: var(--env-var-font-size-small); + opacity: 0.8; } aside .MuiListItemButton-root:not(.selected-path) > * { opacity: 0.9; @@ -42,3 +43,37 @@ aside .selected-path span.MuiTypography-root { aside .MuiStack-root:last-child { margin-top: auto; } +aside .MuiCollapse-wrapperInner .MuiList-root > .MuiListItemButton-root { + position: relative; +} +aside + .MuiCollapse-wrapperInner + .MuiList-root + > .MuiListItemButton-root::before { + content: ""; + position: absolute; + left: -8px; + top: 0; + height: 100%; + width: 100%; + border-left: solid 1px var(--env-var-color-5); + opacity: 0.3; +} +aside + .MuiCollapse-wrapperInner + .MuiList-root + > .MuiListItemButton-root:last-child::before { + height: 50%; +} + +aside .MuiCollapse-wrapperInner .MuiList-root > .MuiListItemButton-root::after { + content: ""; + position: absolute; + left: -8px; + top: 50%; + height: 1px; + width: 5px; + border-radius: 50%; + background-color: var(--env-var-color-5); + opacity: 0.3; +} diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx index 0e0b5e2c3..69fa29a58 100644 --- a/Client/src/Components/Sidebar/index.jsx +++ b/Client/src/Components/Sidebar/index.jsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import { Box, Collapse, @@ -93,6 +93,16 @@ function Sidebar() { navigate("/login"); }; + useEffect(() => { + if ( + location.pathname.includes("monitors") || + location.pathname.includes("pagespeed") + ) + setOpen((prev) => ({ ...prev, Dashboard: true })); + else if (location.pathname.includes("/account")) + setOpen((prev) => ({ ...prev, Account: true })); + }, []); + return ( @@ -146,7 +156,7 @@ function Sidebar() { {item.nested.map((child) => { if ( @@ -169,6 +179,7 @@ function Sidebar() { sx={{ gap: theme.gap.medium, borderRadius: `${theme.shape.borderRadius}px`, + pl: theme.gap.small, }} > @@ -239,8 +250,11 @@ function Sidebar() { - - + + diff --git a/Client/src/assets/icons/logout.svg b/Client/src/assets/icons/logout.svg index bf4183d73..3f3b69c49 100644 --- a/Client/src/assets/icons/logout.svg +++ b/Client/src/assets/icons/logout.svg @@ -1,3 +1,3 @@ - + From 7f3c446fcf52cb38936bce6256345912b4df7906 Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Fri, 16 Aug 2024 14:17:11 -0400 Subject: [PATCH 8/9] fix: added dividers in between sections --- Client/src/Components/Sidebar/index.css | 6 +++--- Client/src/Components/Sidebar/index.jsx | 22 ++++++++++++++++------ Client/src/Layouts/HomeLayout/index.css | 6 +++++- 3 files changed, 24 insertions(+), 10 deletions(-) diff --git a/Client/src/Components/Sidebar/index.css b/Client/src/Components/Sidebar/index.css index 4fde86bff..50b261817 100644 --- a/Client/src/Components/Sidebar/index.css +++ b/Client/src/Components/Sidebar/index.css @@ -40,12 +40,12 @@ aside .selected-path > * { aside .selected-path span.MuiTypography-root { font-weight: 600; } -aside .MuiStack-root:last-child { - margin-top: auto; -} aside .MuiCollapse-wrapperInner .MuiList-root > .MuiListItemButton-root { position: relative; } +aside .MuiDivider-root { + border-color: var(--env-var-color-6); +} aside .MuiCollapse-wrapperInner .MuiList-root diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx index 69fa29a58..70094a0c4 100644 --- a/Client/src/Components/Sidebar/index.jsx +++ b/Client/src/Components/Sidebar/index.jsx @@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react"; import { Box, Collapse, + Divider, IconButton, List, ListItemButton, @@ -104,16 +105,21 @@ function Sidebar() { }, []); return ( - - + + {/* menu */} + Menu } @@ -195,12 +201,17 @@ function Sidebar() { ) )} + {/* other */} + Other } @@ -230,13 +241,12 @@ function Sidebar() { ))} - + diff --git a/Client/src/Layouts/HomeLayout/index.css b/Client/src/Layouts/HomeLayout/index.css index 2798bd292..f143b3fd9 100644 --- a/Client/src/Layouts/HomeLayout/index.css +++ b/Client/src/Layouts/HomeLayout/index.css @@ -25,7 +25,11 @@ border-radius: var(--env-var-radius-1); background-color: var(--env-var-color-8); - padding: var(--env-var-spacing-1) var(--env-var-spacing-1-plus); + padding: var(--env-var-spacing-1) 0; +} +.home-layout aside > *:not(:first-child) { + padding-left: var(--env-var-spacing-1-plus); + padding-right: var(--env-var-spacing-1-plus); } .home-layout > div { From 5c71531fb069e3d54ec7eeced523792605720e5f Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Fri, 16 Aug 2024 16:24:10 -0400 Subject: [PATCH 9/9] fix: updated logo padding --- Client/src/Components/Sidebar/index.css | 2 +- Client/src/Components/Sidebar/index.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/Client/src/Components/Sidebar/index.css b/Client/src/Components/Sidebar/index.css index 50b261817..63c365742 100644 --- a/Client/src/Components/Sidebar/index.css +++ b/Client/src/Components/Sidebar/index.css @@ -72,7 +72,7 @@ aside .MuiCollapse-wrapperInner .MuiList-root > .MuiListItemButton-root::after { left: -8px; top: 50%; height: 1px; - width: 5px; + width: 7px; border-radius: 50%; background-color: var(--env-var-color-5); opacity: 0.3; diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx index 70094a0c4..1ab2171cb 100644 --- a/Client/src/Components/Sidebar/index.jsx +++ b/Client/src/Components/Sidebar/index.jsx @@ -106,7 +106,7 @@ function Sidebar() { return ( - + {/* menu */}