ATLAS-5040: [React UI] Expand Collapse icon position changes on minimizing all treeviews in sidebar

Author: Brijesh619

dashboard/src/components/TreeNodeIcons.tsx

@@ -217,10 +217,6 @@ const TreeNodeIcons = (props: {
         sx={{
           "& .MuiPaper-root": {
             transition: "none !important"
-          },
-          "& .MuiList-padding": {
-            paddingBottom: "0 !important",
-            paddingTop: "0 !important"
           }
         }}
       >
@@ -251,8 +247,8 @@ const TreeNodeIcons = (props: {
                 setCategoryModal(true);
               }
             }}
+            className="sidebar-menu-item"
             data-cy="createClassification"
-            sx={{ paddingRight: "10px", paddingLeft: "10px" }}
           >
             <ListItemIcon sx={{ minWidth: "28px !important" }}>
               <AddIcon fontSize="small" className="menuitem-icon" />
@@ -309,7 +305,7 @@ const TreeNodeIcons = (props: {
               }
             }}
             data-cy="createClassification"
-            sx={{ paddingRight: "10px", paddingLeft: "10px" }}
+            className="sidebar-menu-item"
           >
             <ListItemIcon sx={{ minWidth: "28px !important" }}>
               <ListAltOutlinedIcon fontSize="small" className="menuitem-icon" />
@@ -346,7 +342,7 @@ const TreeNodeIcons = (props: {
               }
             }}
             data-cy="createClassification"
-            sx={{ paddingRight: "10px", paddingLeft: "10px" }}
+            className="sidebar-menu-item"
           >
             <ListItemIcon sx={{ minWidth: "28px !important" }}>
               <DeleteOutlineOutlinedIcon
@@ -389,7 +385,7 @@ const TreeNodeIcons = (props: {
               });
             }}
             data-cy="createClassification"
-            sx={{ paddingRight: "10px", paddingLeft: "10px" }}
+            className="sidebar-menu-item"
           >
             <ListItemIcon sx={{ minWidth: "24px !important" }}>
               <SearchOutlinedIcon fontSize="small" className="menuitem-icon" />
@@ -413,7 +409,7 @@ const TreeNodeIcons = (props: {
                 setCategoryModal(true);
               }}
               data-cy="createClassification"
-              sx={{ paddingRight: "10px", paddingLeft: "10px" }}
+              className="sidebar-menu-item"
             >
               <ListItemIcon sx={{ minWidth: "24px !important" }}>
                 <ListAltIcon fontSize="small" className="menuitem-icon" />
@@ -433,6 +429,7 @@ const TreeNodeIcons = (props: {
               setRenameModal(true);
             }}
             data-cy="createClassification"
+            className="sidebar-menu-item"
           >
             <ListItemIcon>
               <EditOutlinedIcon fontSize="small" className="menuitem-icon" />
@@ -448,6 +445,7 @@ const TreeNodeIcons = (props: {
               setDeleteModal(true);
             }}
             data-cy="downloadBusinessMetadata"
+            className="sidebar-menu-item"
           >
             <ListItemIcon>
               <DeleteOutlineOutlinedIcon

dashboard/src/styles/sidebar.scss

@@ -86,6 +86,7 @@
 
 .menuitem-icon {
   color: v.$text-green;
+  margin-bottom: 2px;
 }
 .menuitem-label {
   color: v.$text-grey;
@@ -157,8 +158,8 @@
   text-overflow: ellipsis;
   overflow: hidden;
   font-size: 14px;
-  line-height: 26px;
-  height: 26px;
+  line-height: 29px;
+  height: 29px;
 }
 
 .sidebar-wrapper {
@@ -209,15 +210,6 @@
   padding-bottom: 1.5rem;
 }
 
-// .custom-treeitem-label.selected .Mui-selected .MuiTreeItem-contentBar {
-//   background-color: rgba(255, 255, 255, 0.08);
-//   border-left: 4px solid #2ccebb;
-// }
-
-// .custom-treeitem-label .Mui-selected .MuiTreeItem-contentBar {
-//   background-color: rgba(255, 255, 255, 0.08);
-//   border-left: 4px solid #2ccebb;
-
 button.MuiButtonBase-root.MuiIconButton-root.MuiIconButton-sizeSmall.tree-item-more-label {
   font-size: 1.25rem !important;
 }
@@ -227,3 +219,7 @@ button.MuiButtonBase-root.MuiIconButton-root.MuiIconButton-sizeSmall.tree-item-m
   font-size: 1.25rem !important;
   color: white !important;
 }
+
+.sidebar-menu-item {
+  padding: 4px 10px !important;
+}

dashboard/src/views/SideBar/SideBarBody.tsx

@@ -370,12 +370,13 @@ const SideBarBody = (props: {
           </div>
           <div
             style={{
-              width: "100%",
+              width: "inherit",
               textAlign: "right",
-              padding: "4px 0",
-              position: "sticky",
+              padding: "8px",
+              position: "fixed",
               bottom: "0px",
-              marginTop: "64px",
+              zIndex: "9",
+              left: "0",
               background: "#034858"
             }}
           >

dashboard/src/views/SideBar/SideBarTree/SideBarTree.tsx

@@ -94,7 +94,7 @@ const CustomContentRoot = styled("div")<CustomContentRootProps>(
     ".MuiTreeItem-contentBar": {
       position: "absolute",
       width: "100%",
-      height: 24,
+      height: 29,
       left: 0
     },
     ".MuiTreeItem-iconContainer": {
@@ -1019,7 +1019,7 @@ const BarTreeView: FC<{
                         }
                       }}
                       data-cy="groupOrFlatTreeView"
-                      sx={{ padding: "4px 10px" }}
+                      className="sidebar-menu-item"
                     >
                       <ListItemIcon
                         sx={{ minWidth: "28px !important" }}
@@ -1054,7 +1054,7 @@ const BarTreeView: FC<{
                         }
                       }}
                       data-cy="createClassification"
-                      sx={{ padding: "4px 10px" }}
+                      className="sidebar-menu-item"
                     >
                       <ListItemIcon
                         sx={{ minWidth: "28px !important" }}
@@ -1082,7 +1082,7 @@ const BarTreeView: FC<{
                           ? true
                           : false
                       }
-                      sx={{ padding: "4px 10px" }}
+                      className="sidebar-menu-item"
                     >
                       <ListItemIcon sx={{ minWidth: "28px !important" }}>
                         <FileDownloadIcon
@@ -1107,7 +1107,7 @@ const BarTreeView: FC<{
                           ? true
                           : false
                       }
-                      sx={{ padding: "4px 10px" }}
+                      className="sidebar-menu-item"
                     >
                       <ListItemIcon sx={{ minWidth: "28px !important" }}>
                         <FileUploadIcon