Sidebar - clean up styles

Author: ryanlanciaux

src/Sidebar/Sidebar.css

@@ -12,11 +12,13 @@
 }
 
 .sidebar-item-group {
+  visibility: hidden;
   height: 0;
   opacity: 0;
 }
 
 .sidebar-item-group-expanded {
+  visibility: visible;
   height: unset;
   opacity: 1;
 }
@@ -57,7 +59,7 @@
 }
 
 .sidebar-item:not(.sidebar-item-file) > button {
-  margin-bottom: 16px;
+  margin-bottom: 0px;
 }
 
 .sidebar-item svg{
@@ -72,7 +74,3 @@
 .sidebar-item .chevron.rotate {
   transform: rotate(-90deg);
 }
-
-.sidebar-item-file:not(:last-child), .sidebar-item-file:first-child {
-  margin-bottom: 16px;
-}

src/Sidebar/SidebarItem.tsx

@@ -87,6 +87,7 @@ export const SidebarItem: FC<SidebarItemProps> = ({
     <Chevron className={classnames('chevron', { rotate: !isOpen })} />
     // <img src={chevron} className={classnames('chevron', { rotate: !isOpen })} />
   );
+
   const onToggleExpanded = (e: React.MouseEvent) => {
     e.preventDefault();
     setIsExpanded(previous =>

src/Sidebar/SidebarItemsFromData.css

@@ -1,3 +1,2 @@
 export * from './Sidebar';
 export * from './SidebarItem';
-export * from './SidebarItemsFromData';