Merge pull request #2728 from daostack/dev

Fix toggle tree icons

Author: MeyerPV

src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/TreeItemTriggerContent/TreeItemTriggerContent.module.scss

@@ -2,6 +2,7 @@
 
 .arrowIconButton {
   padding: 0.75rem 1.25rem 0.75rem var(--item-arrow-pl);
+  width: 2.25rem;
 }
 .arrowIconButtonHidden {
   visibility: hidden;

src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/TreeItemTriggerContent/TreeItemTriggerContent.tsx

@@ -14,56 +14,61 @@ interface TreeItemTriggerContentProps {
   isActive: boolean;
   isOpen: boolean;
   onToggle?: () => void;
-  handleToggle: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  handleToggle: (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+  ) => void;
 }
 
 const TreeItemTriggerContent: FC<TreeItemTriggerContentProps> = (props) => {
-  const { treeItemTriggerStyles, item, level, isOpen, handleToggle, onToggle } = props;
+  const { treeItemTriggerStyles, item, level, isOpen, handleToggle, onToggle } =
+    props;
 
   return (
     <>
-    <ButtonIcon
-      className={classNames(styles.arrowIconButton, {
-        [styles.arrowIconButtonHidden]: !onToggle,
-      })}
-      onClick={handleToggle}
-      aria-label={`${isOpen ? "Hide" : "Show"} ${item.name}'s spaces`}
-      aria-hidden={!onToggle}
-    >
-      <SmallArrowIcon
-        className={classNames(styles.arrowIcon, {
-          [styles.arrowIconOpen]: isOpen,
+      <ButtonIcon
+        className={classNames(styles.arrowIconButton, {
+          [styles.arrowIconButtonHidden]: !onToggle,
         })}
-      />
-    </ButtonIcon>
+        onClick={handleToggle}
+        aria-label={`${isOpen ? "Hide" : "Show"} ${item.name}'s spaces`}
+        aria-hidden={!onToggle}
+      >
+        {item.items && item.items?.length > 0 && (
+          <SmallArrowIcon
+            className={classNames(styles.arrowIcon, {
+              [styles.arrowIconOpen]: isOpen,
+            })}
+          />
+        )}
+      </ButtonIcon>
 
-    <CommonAvatar
-      name={item.name}
-      src={item.image}
-      className={classNames(styles.image, {
-        [classNames(
-          styles.imageNonRounded,
-          treeItemTriggerStyles?.imageNonRounded,
-        )]: level === 1,
-        [styles.imageRounded]: level !== 1,
-      })}
-    />
+      <CommonAvatar
+        name={item.name}
+        src={item.image}
+        className={classNames(styles.image, {
+          [classNames(
+            styles.imageNonRounded,
+            treeItemTriggerStyles?.imageNonRounded,
+          )]: level === 1,
+          [styles.imageRounded]: level !== 1,
+        })}
+      />
 
-    <span className={classNames(styles.name, treeItemTriggerStyles?.name)}>
-      {item.name}
-    </span>
-    {item.nameRightContent}
-    {item.rightContent}
-    {!!item.notificationsAmount && (
-      <span
-        className={styles.notificationsAmount}
-        title={`Notifications amount: ${item.notificationsAmount}`}
-        aria-label={`Notifications amount: ${item.notificationsAmount}`}
-      >
-        {item.notificationsAmount}
+      <span className={classNames(styles.name, treeItemTriggerStyles?.name)}>
+        {item.name}
       </span>
-    )}
-  </>
+      {item.nameRightContent}
+      {item.rightContent}
+      {!!item.notificationsAmount && (
+        <span
+          className={styles.notificationsAmount}
+          title={`Notifications amount: ${item.notificationsAmount}`}
+          aria-label={`Notifications amount: ${item.notificationsAmount}`}
+        >
+          {item.notificationsAmount}
+        </span>
+      )}
+    </>
   );
 };