add special file options to folders

client/modules/IDE/components/FileNode.js

@@ -102,6 +102,28 @@ export class FileNode extends React.Component {
                 </button>
                 <div ref="fileOptions" className="sidebar__file-item-options">
                   <ul title="file options">
+                    {(() => { // eslint-disable-line
+                      if (this.props.fileType === 'folder') {
+                        return (
+                          <li>
+                            <a aria-label="add file" onClick={this.props.newFile} >
+                              Add File
+                            </a>
+                          </li>
+                        );
+                      }
+                    })()}
+                    {(() => { // eslint-disable-line
+                      if (this.props.fileType === 'folder') {
+                        return (
+                          <li>
+                            <a aria-label="add folder" onClick={this.props.newFolder} >
+                              Add Folder
+                            </a>
+                          </li>
+                        );
+                      }
+                    })()}
                     <li>
                       <a
                         onClick={() => {
@@ -162,7 +184,9 @@ FileNode.propTypes = {
   showEditFileName: PropTypes.func.isRequired,
   hideEditFileName: PropTypes.func.isRequired,
   updateFileName: PropTypes.func.isRequired,
-  resetSelectedFile: PropTypes.func.isRequired
+  resetSelectedFile: PropTypes.func.isRequired,
+  newFile: PropTypes.func.isRequired,
+  newFolder: PropTypes.func.isRequired
 };
 
 function mapStateToProps(state, ownProps) {

client/modules/IDE/components/Sidebar.js

@@ -45,12 +45,12 @@ class Sidebar extends React.Component {
             </button>
             <ul className="sidebar__project-options">
               <li>
-                <a onClick={this.props.newFolder} >
+                <a aria-label="add folder" onClick={this.props.newFolder} >
                   Add Folder
                 </a>
               </li>
               <li>
-                <a onClick={this.props.newFile} >
+                <a aria-label="add file" onClick={this.props.newFile} >
                   Add File
                 </a>
               </li>

client/styles/components/_sidebar.scss

@@ -78,6 +78,7 @@
   position: absolute;
   top: 95%;
   left: 77%;
+  right: -65%;
   display: none;
   z-index: 100;
   padding: #{8 / $base-font-size}rem #{16 / $base-font-size}rem;