renew SideNav

browser/main/HomePage/SideNav/RepositorySection.js

@@ -3,8 +3,13 @@ import CSSModules from 'browser/lib/CSSModules'
 import styles from './RepositorySection.styl'
 import Repository from 'browser/lib/Repository'
 
+const electron = require('electron')
+const { remote } = electron
+const Menu = remote.Menu
+const MenuItem = remote.MenuItem
+
 class RepositorySection extends React.Component {
-  handleUnlinkButtonClick (e) {
+  handleUnlinkButtonClick () {
     let { dispatch, repository } = this.props
 
     Repository.find(repository.key)
@@ -19,6 +24,27 @@ class RepositorySection extends React.Component {
       })
   }
 
+  handleToggleButtonClick (e) {
+
+  }
+
+  handleContextButtonClick (e) {
+    var menu = new Menu()
+    menu.append(new MenuItem({
+      label: 'New Note'
+    }))
+    menu.append(new MenuItem({
+      label: 'New Folder'
+    }))
+    menu.append(new MenuItem({ type: 'separator' }))
+    menu.append(new MenuItem({
+      label: 'Unmount',
+      click: () => this.handleUnlinkButtonClick()
+    }))
+
+    menu.popup(remote.getCurrentWindow())
+  }
+
   render () {
     let { repository } = this.props
 
@@ -33,10 +59,7 @@ class RepositorySection extends React.Component {
           </div>
           <div styleName='folder-control'>
             <button styleName='folder-control-button'>
-              <i className='fa fa-pencil'/>
-            </button>
-            <button styleName='folder-control-button'>
-              <i className='fa fa-trash'/>
+              <i className='fa fa-ellipsis-v'/>
             </button>
           </div>
         </div>
@@ -55,15 +78,12 @@ class RepositorySection extends React.Component {
 
           <div styleName='header-control'>
             <button styleName='header-control-button'
-              onClick={(e) => this.handleUnlinkButtonClick(e)}
+              onClick={(e) => this.handleContextButtonClick(e)}
             >
-              <i className='fa fa-unlink'/>
-            </button>
-            <button styleName='header-control-button'
-            >
-              <i className='fa fa-pencil'/>
+              <i className='fa fa-ellipsis-v'/>
             </button>
             <button styleName='header-control-button'
+              onClick={(e) => this.handleToggleButtonClick(e)}
             >
               <i className='fa fa-angle-down'/>
             </button>