add expanding/contracting styles

client/images/triangle-arrow-down.svg

@@ -1,7 +1,5 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg width="10px" height="10px" viewBox="0 0 5 5" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>Down Arrow</title>
-    <title>Triangle 3</title>
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">

client/images/triangle-arrow-right.svg

@@ -1,7 +1,5 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg width="10px" height="10px" viewBox="0 0 5 5" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>Right Arrow</title>
-    <title>Triangle 3</title>
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">

client/modules/IDE/components/FileNode.js

@@ -83,23 +83,22 @@ export class FileNode extends React.Component {
                         <InlineSVG src={fileUrl} />
                       </span>
                     );
-                  } else if (this.props.isFolderClosed) {
-                    return (
-                      <span
-                        className="sidebar__file-item-icon"
-                        onClick={() => this.props.showFolderChildren(this.props.id)}
-                      >
-                        <InlineSVG src={folderRightUrl} />
-                      </span>
-                    );
                   }
                   return (
-                    <span
+                    <div>
-                      className="sidebar__file-item-icon"
+                      <span
-                      onClick={() => this.props.hideFolderChildren(this.props.id)}
+                        className="sidebar__file-item-closed"
-                    >
+                        onClick={() => this.props.showFolderChildren(this.props.id)}
-                      <InlineSVG src={folderDownUrl} />
+                      >
-                    </span>
+                        <InlineSVG className="folder-right" src={folderRightUrl} />
+                      </span>
+                      <span
+                        className="sidebar__file-item-open"
+                        onClick={() => this.props.hideFolderChildren(this.props.id)}
+                      >
+                        <InlineSVG className="folder-down" src={folderDownUrl} />
+                      </span>
+                    </div>
                   );
                 })()}
                 <a className="sidebar__file-item-name">{this.props.name}</a>

client/styles/components/_sidebar.scss

@@ -166,6 +166,21 @@
   margin-right: #{5 / $base-font-size}rem;
 }
 
+.sidebar__file-item-closed {
+  @extend .sidebar__file-item-icon;
+  display: none;
+  .sidebar__file-item--closed & {
+    display: inline-block;
+  }
+}
+
+.sidebar__file-item-open {
+  @extend .sidebar__file-item-icon;
+  .sidebar__file-item--closed & {
+    display: none;
+  }
+}
+
 .sidebar__project-options {
   @extend %modal;
   display: none;