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 @@