Fixed wonky animation

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

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>
         ))}