From a5a2674f1f2c0ec72ad733ad11d8f615a9b45c8b Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Thu, 22 Aug 2024 15:00:44 -0400
Subject: [PATCH 1/3] Adjusted padding measurements

---
 Client/src/Components/Sidebar/index.css | 19 +++++++++-----
 Client/src/Components/Sidebar/index.jsx | 35 +++++++++++--------------
 Client/src/Pages/Monitors/index.jsx     |  1 +
 3 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/Client/src/Components/Sidebar/index.css b/Client/src/Components/Sidebar/index.css
index 10cdfc77d..1535b6143 100644
--- a/Client/src/Components/Sidebar/index.css
+++ b/Client/src/Components/Sidebar/index.css
@@ -76,14 +76,21 @@ aside .MuiCollapse-wrapperInner .MuiList-root > .MuiListItemButton-root::after {
   content: "";
   position: absolute;
   left: -8px;
-  top: 50%;
-  transform: translateY(-50%);
+  top: 45%;
   height: 3px;
   width: 3px;
   border-radius: 50%;
   background-color: #d6d9dd;
 }
 
+aside
+  .MuiCollapse-wrapperInner
+  .MuiList-root
+  > .selected-path.MuiListItemButton-root::after {
+  background-color: var(--env-var-color-2);
+  transform: scale(1.2);
+}
+
 aside {
   transition: flex 300ms ease-out;
 }
@@ -104,20 +111,20 @@ aside {
   padding: 5px 8px;
   border-radius: var(--env-var-radius-1);
 }
-.sidebar-popup li.MuiButtonBase-root:hover{
+.sidebar-popup li.MuiButtonBase-root:hover {
   background-color: var(--env-var-color-13);
 }
-.sidebar-popup li.MuiButtonBase-root:has(.MuiBox-root):hover{
+.sidebar-popup li.MuiButtonBase-root:has(.MuiBox-root):hover {
   background-color: white;
 }
-.sidebar-popup li.MuiButtonBase-root:has(.MuiBox-root){
+.sidebar-popup li.MuiButtonBase-root:has(.MuiBox-root) {
   padding-bottom: 0;
 }
 .sidebar-popup .MuiModal-root p.MuiTypography-root {
   font-size: var(--env-var-font-size-medium);
   color: var(--env-var-color-2);
 }
-.sidebar-popup svg{
+.sidebar-popup svg {
   width: 16px;
   height: 16px;
   opacity: 0.9;
diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx
index 69b44c125..ddcbf8ade 100644
--- a/Client/src/Components/Sidebar/index.jsx
+++ b/Client/src/Components/Sidebar/index.jsx
@@ -128,11 +128,7 @@ function Sidebar() {
       gap={theme.gap.medium}
       sx={{ flex: collapsed ? 0 : 1 }}
     >
-      <Stack
-        alignItems={collapsed ? "center" : "flex-start"}
-        py={theme.gap.large}
-        pl={collapsed ? 0 : theme.gap.lgplus}
-      >
+      <Stack py={theme.gap.large} pl={theme.gap.mlplus}>
         {collapsed ? (
           <BWULogoAbbreviated alt="BlueWave Uptime Logo" />
         ) : (
@@ -175,14 +171,14 @@ function Sidebar() {
             id="nested-menu-subheader"
             sx={{
               pt: theme.gap.small,
-              px: collapsed ? theme.gap.xs : theme.gap.ml,
+              px: collapsed ? 0 : theme.gap.small,
               textAlign: collapsed ? "center" : "left",
             }}
           >
             Menu
           </ListSubheader>
         }
-        sx={{ px: collapsed ? theme.gap.xs : theme.gap.ml }}
+        sx={{ px: theme.gap.medium }}
       >
         {menu.map((item) =>
           item.path ? (
@@ -210,9 +206,9 @@ function Sidebar() {
                 }
                 onClick={() => navigate(`/${item.path}`)}
                 sx={{
-                  gap: theme.gap.medium,
+                  gap: theme.gap.small,
                   borderRadius: `${theme.shape.borderRadius}px`,
-                  justifyContent: collapsed ? "center" : "flex-start",
+                  px: theme.gap.small,
                 }}
               >
                 <ListItemIcon sx={{ minWidth: 0 }}>{item.icon}</ListItemIcon>
@@ -247,9 +243,9 @@ function Sidebar() {
                   onClick={(event) => openPopup(event, item.name)}
                   sx={{
                     position: "relative",
-                    gap: theme.gap.medium,
+                    gap: theme.gap.small,
                     borderRadius: `${theme.shape.borderRadius}px`,
-                    justifyContent: collapsed ? "center" : "flex-start",
+                    px: theme.gap.small,
                   }}
                 >
                   <ListItemIcon sx={{ minWidth: 0 }}>{item.icon}</ListItemIcon>
@@ -311,9 +307,9 @@ function Sidebar() {
                   }))
                 }
                 sx={{
-                  gap: theme.gap.medium,
+                  gap: theme.gap.small,
                   borderRadius: `${theme.shape.borderRadius}px`,
-                  justifyContent: collapsed ? "center" : "flex-start",
+                  px: theme.gap.small,
                 }}
               >
                 <ListItemIcon sx={{ minWidth: 0 }}>{item.icon}</ListItemIcon>
@@ -324,7 +320,7 @@ function Sidebar() {
                 <List
                   component="div"
                   disablePadding
-                  sx={{ pl: theme.gap.lgplus }}
+                  sx={{ pl: theme.gap.large }}
                 >
                   {item.nested.map((child) => {
                     if (
@@ -374,14 +370,14 @@ function Sidebar() {
             id="nested-other-subheader"
             sx={{
               pt: theme.gap.small,
-              px: collapsed ? theme.gap.xs : theme.gap.ml,
+              px: collapsed ? 0 : theme.gap.small,
               textAlign: collapsed ? "center" : "left",
             }}
           >
             Other
           </ListSubheader>
         }
-        sx={{ px: collapsed ? theme.gap.xs : theme.gap.ml }}
+        sx={{ px: theme.gap.medium }}
       >
         {other.map((item) => (
           <Tooltip
@@ -416,9 +412,9 @@ function Sidebar() {
                   : navigate(`/${item.path}`)
               }
               sx={{
-                gap: theme.gap.medium,
+                gap: theme.gap.small,
                 borderRadius: `${theme.shape.borderRadius}px`,
-                justifyContent: collapsed ? "center" : "flex-start",
+                px: theme.gap.small,
               }}
             >
               <ListItemIcon sx={{ minWidth: 0 }}>{item.icon}</ListItemIcon>
@@ -432,10 +428,9 @@ function Sidebar() {
       <Stack
         direction="row"
         height="50px"
-        justifyContent={collapsed ? "center" : "flex-start"}
         alignItems="center"
         py={theme.gap.small}
-        px={theme.gap.medium}
+        px={theme.gap.ml}
         gap={theme.gap.xs}
         borderRadius={`${theme.shape.borderRadius}px`}
       >
diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx
index dc293ef49..15c98ce24 100644
--- a/Client/src/Pages/Monitors/index.jsx
+++ b/Client/src/Pages/Monitors/index.jsx
@@ -437,6 +437,7 @@ const Monitors = () => {
                 <ServerStatus title="Paused" value={0} state="pause" />
               </Stack>
               <Box
+                flex={1}
                 p={theme.gap.lgplus}
                 border={1}
                 borderColor={theme.palette.otherColors.graishWhite}

From 7687d75fdb9941e6b6bb12dc1e29efa44fc626be Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Thu, 22 Aug 2024 15:51:22 -0400
Subject: [PATCH 2/3] Added bwu icon

---
 Client/src/Components/Sidebar/index.jsx     | 43 ++++++++++++++++-----
 Client/src/assets/icons/bwu-abbreviated.svg |  4 --
 2 files changed, 34 insertions(+), 13 deletions(-)
 delete mode 100644 Client/src/assets/icons/bwu-abbreviated.svg

diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx
index ddcbf8ade..bdf1fcf65 100644
--- a/Client/src/Components/Sidebar/index.jsx
+++ b/Client/src/Components/Sidebar/index.jsx
@@ -26,8 +26,6 @@ import LockSvg from "../../assets/icons/lock.svg?react";
 import UserSvg from "../../assets/icons/user.svg?react";
 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 BWULogoAbbreviated from "../../assets/icons/bwu-abbreviated.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";
@@ -128,17 +126,44 @@ function Sidebar() {
       gap={theme.gap.medium}
       sx={{ flex: collapsed ? 0 : 1 }}
     >
-      <Stack py={theme.gap.large} pl={theme.gap.mlplus}>
-        {collapsed ? (
-          <BWULogoAbbreviated alt="BlueWave Uptime Logo" />
-        ) : (
-          <BWULogo alt="BlueWave Uptime Logo" />
-        )}
+      <Stack
+        pt={theme.gap.medium}
+        pb={theme.gap.large}
+        pl={collapsed ? theme.gap.ml : theme.gap.mlplus}
+      >
+        <Stack direction="row" alignItems="center" gap={theme.gap.small}>
+          <Stack
+            justifyContent="center"
+            alignItems="center"
+            minWidth={theme.gap.lgplus}
+            minHeight={theme.gap.lgplus}
+            fontSize="18px"
+            color="white"
+            sx={{
+              position: "relative",
+              backgroundColor: theme.palette.primary.main,
+              borderRadius: "4px",
+              userSelect: "none",
+            }}
+          >
+            BU
+          </Stack>
+          {!collapsed && (
+            <Typography
+              component="span"
+              mt={theme.gap.xs}
+              sx={{ opacity: 0.8, fontWeight: 500 }}
+            >
+              BlueWave Uptime
+            </Typography>
+          )}
+        </Stack>
         <IconButton
           sx={{
             position: "absolute",
+            top: 60,
             right: 0,
-            transform: `translate(50%, 50%)`,
+            transform: `translate(50%, 0)`,
             backgroundColor: theme.palette.otherColors.fillGray,
             border: `solid 1px ${theme.palette.otherColors.graishWhite}`,
             p: "5px",
diff --git a/Client/src/assets/icons/bwu-abbreviated.svg b/Client/src/assets/icons/bwu-abbreviated.svg
deleted file mode 100644
index a5e00f484..000000000
--- a/Client/src/assets/icons/bwu-abbreviated.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="26" height="16" viewBox="0 0 26 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.761364 15V0.454545H5.84659C6.85985 0.454545 7.69555 0.629735 8.35369 0.980114C9.01184 1.32576 9.50189 1.79214 9.82386 2.37926C10.1458 2.96165 10.3068 3.60795 10.3068 4.31818C10.3068 4.94318 10.1955 5.45928 9.97301 5.86648C9.75521 6.27367 9.46638 6.59564 9.10653 6.83239C8.75142 7.06913 8.36553 7.24432 7.94886 7.35795V7.5C8.39394 7.52841 8.84138 7.68466 9.29119 7.96875C9.741 8.25284 10.1174 8.66004 10.4205 9.19034C10.7235 9.72064 10.875 10.3693 10.875 11.1364C10.875 11.8655 10.7093 12.5213 10.3778 13.1037C10.0464 13.6861 9.5232 14.1477 8.80824 14.4886C8.09328 14.8295 7.16288 15 6.01705 15H0.761364ZM2.52273 13.4375H6.01705C7.16761 13.4375 7.98438 13.215 8.46733 12.7699C8.95502 12.3201 9.19886 11.7756 9.19886 11.1364C9.19886 10.6439 9.07339 10.1894 8.82244 9.77273C8.5715 9.35133 8.21402 9.01515 7.75 8.7642C7.28598 8.50852 6.73674 8.38068 6.10227 8.38068H2.52273V13.4375ZM2.52273 6.84659H5.78977C6.32008 6.84659 6.7983 6.74242 7.22443 6.53409C7.6553 6.32576 7.99621 6.0322 8.24716 5.65341C8.50284 5.27462 8.63068 4.82955 8.63068 4.31818C8.63068 3.67898 8.40814 3.13684 7.96307 2.69176C7.51799 2.24195 6.8125 2.01705 5.84659 2.01705H2.52273V6.84659Z" fill="#344054"/>
-<path d="M23.3146 0.454545H25.076V10.0852C25.076 11.0795 24.8416 11.9673 24.3729 12.7486C23.9089 13.5251 23.2531 14.1383 22.4055 14.5881C21.558 15.0331 20.5637 15.2557 19.4226 15.2557C18.2815 15.2557 17.2872 15.0331 16.4396 14.5881C15.5921 14.1383 14.9339 13.5251 14.4652 12.7486C14.0012 11.9673 13.7692 11.0795 13.7692 10.0852V0.454545H15.5305V9.94318C15.5305 10.6534 15.6868 11.2855 15.9993 11.8395C16.3118 12.3887 16.7569 12.822 17.3345 13.1392C17.9169 13.4517 18.6129 13.608 19.4226 13.608C20.2322 13.608 20.9283 13.4517 21.5107 13.1392C22.093 12.822 22.5381 12.3887 22.8459 11.8395C23.1584 11.2855 23.3146 10.6534 23.3146 9.94318V0.454545Z" fill="#1570EF"/>
-</svg>

From c112fb45b62862e1fac22b28ba99fa58ed9dfcd5 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Thu, 22 Aug 2024 17:13:29 -0400
Subject: [PATCH 3/3] Fixed wonky animation

---
 Client/src/Components/Sidebar/index.css | 50 ++++++++++++++++++++++---
 Client/src/Components/Sidebar/index.jsx | 43 ++++++++++-----------
 2 files changed, 65 insertions(+), 28 deletions(-)

diff --git a/Client/src/Components/Sidebar/index.css b/Client/src/Components/Sidebar/index.css
index 1535b6143..8ce0089bc 100644
--- a/Client/src/Components/Sidebar/index.css
+++ b/Client/src/Components/Sidebar/index.css
@@ -91,10 +91,6 @@ aside
   transform: scale(1.2);
 }
 
-aside {
-  transition: flex 300ms ease-out;
-}
-
 .sidebar-popup .MuiPaper-root {
   box-shadow: var(--env-var-shadow-1);
   border: solid 1px var(--env-var-color-6);
@@ -102,7 +98,7 @@ aside {
   gap: 1px;
 }
 .sidebar-popup .MuiList-root {
-  padding: 6px 6px;
+  padding: 3px;
   min-width: 100px;
 }
 .sidebar-popup li.MuiButtonBase-root {
@@ -129,3 +125,47 @@ aside {
   height: 16px;
   opacity: 0.9;
 }
+
+/* TRANSITIONS */
+aside {
+  flex: 1;
+  transition: max-width 650ms cubic-bezier(0.36, -0.01, 0, 0.77);
+}
+.home-layout aside.collapsed {
+  max-width: 64px;
+}
+
+aside.expanded .MuiTypography-root,
+aside.expanded p.MuiTypography-root,
+aside.expanded .MuiListItemText-root + svg,
+aside.expanded .MuiAvatar-root + .MuiBox-root + .MuiIconButton-root {
+  visibility: visible;
+  animation: fadeIn 1s ease;
+}
+
+aside.collapsed .MuiTypography-root,
+aside.collapsed p.MuiTypography-root,
+aside.collapsed .MuiListItemText-root + svg,
+aside.collapsed .MuiAvatar-root + .MuiBox-root + .MuiIconButton-root {
+  opacity: 0;
+  visibility: hidden;
+}
+
+aside .MuiListSubheader-root {
+  transition: all 200ms ease;
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+    visibility: hidden;
+  }
+  30% {
+    opacity: 0;
+    visibility: hidden;
+  }
+  100% {
+    opacity: 0.9;
+    visibility: visible;
+  }
+}
diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx
index bdf1fcf65..f1bfcb719 100644
--- a/Client/src/Components/Sidebar/index.jsx
+++ b/Client/src/Components/Sidebar/index.jsx
@@ -123,14 +123,10 @@ function Sidebar() {
   return (
     <Stack
       component="aside"
+      className={collapsed ? "collapsed" : "expanded"}
       gap={theme.gap.medium}
-      sx={{ flex: collapsed ? 0 : 1 }}
     >
-      <Stack
-        pt={theme.gap.medium}
-        pb={theme.gap.large}
-        pl={collapsed ? theme.gap.ml : theme.gap.mlplus}
-      >
+      <Stack pt={theme.gap.medium} pb={theme.gap.large} pl={theme.gap.ml}>
         <Stack direction="row" alignItems="center" gap={theme.gap.small}>
           <Stack
             justifyContent="center"
@@ -148,15 +144,13 @@ function Sidebar() {
           >
             BU
           </Stack>
-          {!collapsed && (
-            <Typography
-              component="span"
-              mt={theme.gap.xs}
-              sx={{ opacity: 0.8, fontWeight: 500 }}
-            >
-              BlueWave Uptime
-            </Typography>
-          )}
+          <Typography
+            component="span"
+            mt={theme.gap.xs}
+            sx={{ opacity: 0.8, fontWeight: 500 }}
+          >
+            BlueWave Uptime
+          </Typography>
         </Stack>
         <IconButton
           sx={{
@@ -180,7 +174,10 @@ function Sidebar() {
               borderColor: theme.palette.otherColors.graishWhite,
             },
           }}
-          onClick={() => dispatch(toggleSidebar())}
+          onClick={() => {
+            setOpen({ Dashboard: false, Account: false });
+            dispatch(toggleSidebar());
+          }}
         >
           {collapsed ? <ArrowRight /> : <ArrowLeft />}
         </IconButton>
@@ -196,8 +193,7 @@ function Sidebar() {
             id="nested-menu-subheader"
             sx={{
               pt: theme.gap.small,
-              px: collapsed ? 0 : theme.gap.small,
-              textAlign: collapsed ? "center" : "left",
+              px: collapsed ? theme.gap.xs : theme.gap.small,
             }}
           >
             Menu
@@ -231,13 +227,14 @@ function Sidebar() {
                 }
                 onClick={() => navigate(`/${item.path}`)}
                 sx={{
+                  height: "37px",
                   gap: theme.gap.small,
                   borderRadius: `${theme.shape.borderRadius}px`,
                   px: theme.gap.small,
                 }}
               >
                 <ListItemIcon sx={{ minWidth: 0 }}>{item.icon}</ListItemIcon>
-                {!collapsed && <ListItemText>{item.name}</ListItemText>}
+                <ListItemText>{item.name}</ListItemText>
               </ListItemButton>
             </Tooltip>
           ) : collapsed ? (
@@ -274,7 +271,7 @@ function Sidebar() {
                   }}
                 >
                   <ListItemIcon sx={{ minWidth: 0 }}>{item.icon}</ListItemIcon>
-                  {!collapsed && <ListItemText>{item.name}</ListItemText>}
+                  <ListItemText>{item.name}</ListItemText>
                 </ListItemButton>
               </Tooltip>
               <Menu
@@ -286,7 +283,7 @@ function Sidebar() {
                   vertical: "top",
                   horizontal: "right",
                 }}
-                sx={{ ml: theme.gap.small }}
+                sx={{ ml: theme.gap.ml }}
               >
                 {item.nested.map((child) => {
                   if (
@@ -313,6 +310,7 @@ function Sidebar() {
                         gap: theme.gap.small,
                         borderRadius: `${theme.shape.borderRadius}px`,
                         pl: theme.gap.small,
+                        mb:"1px"
                       }}
                     >
                       {child.icon}
@@ -396,7 +394,6 @@ function Sidebar() {
             sx={{
               pt: theme.gap.small,
               px: collapsed ? 0 : theme.gap.small,
-              textAlign: collapsed ? "center" : "left",
             }}
           >
             Other
@@ -443,7 +440,7 @@ function Sidebar() {
               }}
             >
               <ListItemIcon sx={{ minWidth: 0 }}>{item.icon}</ListItemIcon>
-              {!collapsed && <ListItemText>{item.name}</ListItemText>}
+              <ListItemText>{item.name}</ListItemText>
             </ListItemButton>
           </Tooltip>
         ))}