Merge pull request #10 from ccontrols/clickable-sidebar-icon

Make Sidebar Icon Clickable
ccontrols · Feb 14, 2021 · 8dda340 · 8dda340
2 parents c0f25e7 + f3a4bb5
commit 8dda340
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 32 deletions.
diff --git a/ui/components/src/Tree/Tree.tsx b/ui/components/src/Tree/Tree.tsx
@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { FC, useEffect, useState } from 'react';
 import { jsx, Box, Flex, Text, Button, BoxProps, ButtonProps } from 'theme-ui';
-import { ChevronDownIcon, ChevronRightIcon } from '@primer/octicons-react';
+import { ChevronDownIcon } from '@primer/octicons-react';
 import {
   Keyboard,
   LEFT_ARROW,
@@ -34,8 +34,7 @@ export const Tree: FC<TreeProps> = ({
   onSelect,
   onExpandCollapse,
   arrowPosition = 'end',
-  iconExpanded = <ChevronDownIcon />,
-  iconCollapsed = <ChevronRightIcon />,
+  chevronIcon = <ChevronDownIcon />,
   indentPixels = 8,
   ...rest
 }) => {
@@ -105,8 +104,11 @@ export const Tree: FC<TreeProps> = ({
       <Box
         aria-label={isExpanded ? 'collapse items' : 'expand items'}
         variant="tree.expandicon"
+        sx={{
+          transform: isExpanded ? undefined : 'rotate(-90deg)',
+        }}
       >
-        {isExpanded ? iconExpanded : iconCollapsed}
+        {chevronIcon}
       </Box>
     ) : null;
     const content = (
@@ -133,30 +135,36 @@ export const Tree: FC<TreeProps> = ({
                 }
               }}
             >
-              <Box variant="tree.labelcontainer">
-                {arrowPosition === 'start' ? expandIcon : null}
-                {icon && <Box variant="tree.labelicon">{icon}</Box>}
-                {typeof label === 'string' ? (
-                  <Text
-                    variant="tree.labeltext"
-                    sx={{
-                      color: isActiveParent ? 'primary' : 'text',
-                    }}
-                  >
-                    {itemItems ? <strong>{label}</strong> : label}
-                  </Text>
-                ) : typeof label === 'function' ? (
-                  label({ isExpanded, ...item })
-                ) : (
-                  label
-                )}
-              </Box>
+              <Flex
+                sx={{ flexDirection: 'row', justifyContent: 'space-between' }}
+              >
+                <Box variant="tree.labelcontainer">
+                  {arrowPosition === 'start' ? expandIcon : null}
+                  {icon && <Box variant="tree.labelicon">{icon}</Box>}
+                  {typeof label === 'string' ? (
+                    <Text
+                      variant="tree.labeltext"
+                      sx={{
+                        color: isActiveParent ? 'primary' : 'text',
+                      }}
+                    >
+                      {itemItems ? <strong>{label}</strong> : label}
+                    </Text>
+                  ) : typeof label === 'function' ? (
+                    label({ isExpanded, ...item })
+                  ) : (
+                    label
+                  )}
+                </Box>
+                <Flex
+                  sx={{ flexDirection: 'row', alignItems: 'center', px: 2 }}
+                >
+                  {widget && <Box variant="tree.widget">{widget}</Box>}
+                  {arrowPosition === 'end' ? expandIcon : null}
+                </Flex>
+              </Flex>
             </LinkClass>
           </Flex>
-          <Flex sx={{ flexDirection: 'row', alignItems: 'center', px: 2 }}>
-            {widget && <Box variant="tree.widget">{widget}</Box>}
-            {arrowPosition === 'end' ? expandIcon : null}
-          </Flex>
         </Flex>
       </Flex>
     );

diff --git a/ui/components/src/Tree/tree-utils.ts b/ui/components/src/Tree/tree-utils.ts
@@ -193,14 +193,10 @@ export type TreeOwnProps = {
   search?: string;
 
   /**
-   * custom icon when the item is expanded
+   * custom chevron icon
    */
-  iconExpanded?: ReactNode;
 
-  /**
-   * custom icon when the item is collapsed
-   */
-  iconCollapsed?: ReactNode;
+  chevronIcon?: ReactNode;
 
   /**
    * indentation in pixels for each elevel, By default 6 pixels