fix: added nested borders

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;
+}

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 (
     <Stack component="aside" gap={theme.gap.large}>
       <Box pt={theme.gap.large} pl={theme.gap.ml} pb={theme.gap.xs}>
@@ -146,7 +156,7 @@ function Sidebar() {
                 <List
                   component="div"
                   disablePadding
-                  sx={{ pl: theme.gap.large }}
+                  sx={{ pl: theme.gap.lgplus }}
                 >
                   {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,
                         }}
                       >
                         <ListItemIcon sx={{ minWidth: 0 }}>
@@ -239,8 +250,11 @@ function Sidebar() {
           </Typography>
         </Box>
         <Tooltip title="Log Out">
-          <IconButton sx={{ ml: "auto" }}>
-            <LogoutSvg />
+          <IconButton
+            sx={{ ml: "auto", "&:focus": { outline: "none" } }}
+            onClick={logout}
+          >
+            <LogoutSvg style={{ width: "20px", height: "20px" }} />
           </IconButton>
         </Tooltip>
       </Stack>

Client/src/assets/icons/logout.svg

@@ -1,3 +1,3 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.6667 11.3333L14 8M14 8L10.6667 4.66667M14 8H6M6 2H5.2C4.0799 2 3.51984 2 3.09202 2.21799C2.7157 2.40973 2.40973 2.71569 2.21799 3.09202C2 3.51984 2 4.07989 2 5.2V10.8C2 11.9201 2 12.4802 2.21799 12.908C2.40973 13.2843 2.71569 13.5903 3.09202 13.782C3.51984 14 4.0799 14 5.2 14H6" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.6667 11.3333L14 8M14 8L10.6667 4.66667M14 8H6M6 2H5.2C4.0799 2 3.51984 2 3.09202 2.21799C2.7157 2.40973 2.40973 2.71569 2.21799 3.09202C2 3.51984 2 4.07989 2 5.2V10.8C2 11.9201 2 12.4802 2.21799 12.908C2.40973 13.2843 2.71569 13.5903 3.09202 13.782C3.51984 14 4.0799 14 5.2 14H6" stroke="#667085" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>