Rotate triangle button

packages/app/src/components/Sidebar/PageTree/Item.tsx

@@ -70,10 +70,18 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
   if (page.isTarget) opacityStyle.opacity = 0.7;
   if (isOpen) opacityStyle.opacity = 0.5;
 
+  const buttonClass = isOpen ? 'rotate' : '';
+
   return (
     <div style={{ margin: '10px' }}>
       <div style={opacityStyle}>
-        <button type="button" className="d-inline-block btn btn-light p-1 mr-1" onClick={onClickLoadChildren}>Load</button>
+        <button
+          type="button"
+          className={`grw-page-tree-button d-inline-block mr-1 ${buttonClass}`}
+          onClick={onClickLoadChildren}
+        >
+          <i className="fa fa-caret-right"></i>
+        </button>
         <a href={page._id} className="d-inline-block">
           <p>{nodePath.basename(page.path as string) || '/'}</p>
         </a>

packages/app/src/components/Sidebar/PageTree/ItemsTree.tsx

@@ -85,9 +85,9 @@ const ItemsTree: FC = () => {
 
   const isOpen = true;
   return (
-    <>
+    <div className="grw-page-tree">
       <Item key={(initialNode as ItemNode).page.path} itemNode={(initialNode as ItemNode)} isOpen={isOpen} />
-    </>
+    </div>
   );
 };
 

packages/app/src/styles/_page-tree.scss

@@ -0,0 +1,9 @@
+// TODO: improve styles
+.grw-page-tree {
+  .grw-page-tree-button {
+    // animation: transform 3s ease-out;
+    &.rotate {
+      transform: rotate(90deg);
+    }
+  }
+}

packages/app/src/styles/style-app.scss

@@ -56,6 +56,7 @@
 @import 'page-accessories-control';
 @import 'page-accessories-modal';
 @import 'page-path';
+@import 'page-tree';
 @import 'page';
 @import 'page-presentation';
 @import 'page-history';