fix: added dividers in between sections

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

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 (
-    <Stack component="aside" gap={theme.gap.large}>
-      <Box pt={theme.gap.large} pl={theme.gap.ml} pb={theme.gap.xs}>
+    <Stack component="aside" gap={theme.gap.medium}>
+      <Box pt={theme.gap.large} pl={theme.gap.lgplus} pb={theme.gap.xs}>
         <BWULogo alt="BlueWave Uptime Logo" />
       </Box>
       {/* menu */}
       <List
         component="nav"
         aria-labelledby="nested-menu-subheader"
+        disablePadding
         subheader={
-          <ListSubheader component="div" id="nested-menu-subheader">
+          <ListSubheader
+            component="div"
+            id="nested-menu-subheader"
+            sx={{ pt: theme.gap.small }}
+          >
             Menu
           </ListSubheader>
         }
@@ -195,12 +201,17 @@ function Sidebar() {
           )
         )}
       </List>
+      <Divider sx={{ my: theme.gap.small }} />
       {/* other */}
       <List
         component="nav"
         aria-labelledby="nested-other-subheader"
         subheader={
-          <ListSubheader component="div" id="nested-other-subheader">
+          <ListSubheader
+            component="div"
+            id="nested-other-subheader"
+            sx={{ pt: theme.gap.small }}
+          >
             Other
           </ListSubheader>
         }
@@ -230,13 +241,12 @@ function Sidebar() {
           </ListItemButton>
         ))}
       </List>
-
+      <Divider sx={{ mt: "auto" }} />
       <Stack
         direction="row"
         alignItems="center"
         py={theme.gap.small}
         px={theme.gap.medium}
-        pr={0}
         gap={theme.gap.xs}
         borderRadius={`${theme.shape.borderRadius}px`}
       >

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 {