Add menubar.

src/App.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 
 import Editor from './components/Editor/Editor'
 import TabBar from './components/TabBar/TabBar'
+import MenuBar from './components/MenuBar/MenuBar'
 import StatusPanel from './components/StatusPanel/StatusPanel'
 import ThemeManager from './lib/ThemeManager'
 import AppManager from './model/AppManager'
@@ -27,6 +28,7 @@ class App extends Component {
   render() {
     return (
       <div className="App" style={theme.getColorStyles()}>
+      <MenuBar/>
         <TabBar />
         <Editor />
         <StatusPanel />

src/components/Editor/Editor.css

@@ -8,7 +8,7 @@
 .Editor {
   text-align: left;
   width: calc(100% - 10px);
-  height: calc(100vh - 70px);
+  height: calc(100vh - 110px);
   overflow-y: auto;
   resize: none;
   outline: none;

src/components/MenuBar/MenuBar.css

@@ -0,0 +1,13 @@
+.MenuBarContainer {
+  display: flex;
+  flex-direction: row-reverse;
+  border-bottom: solid 1px #606993;
+  height: 30px;
+}
+
+button {
+  border-radius: 5px;
+  margin-right: 5px;
+  font-weight: bolder;
+  margin: 2px;
+}

src/components/MenuBar/MenuBar.js

@@ -0,0 +1,33 @@
+import React, { Component } from 'react'
+
+import ThemeManager from '../../lib/ThemeManager'
+import DocumentManager from '../../model/DocumentManager'
+
+import './MenuBar.css'
+
+const theme = ThemeManager.getInstance()
+const documents = DocumentManager.getInstance()
+
+class MenuBar extends Component {
+  render() {
+    return (
+      <div className="MenuBarContainer">
+        <button style={theme.getColorStyles()} onClick={this.download}>
+          Download
+        </button>
+      </div>
+    )
+  }
+
+  download() {
+    let element = document.createElement('a')
+    element.setAttribute(
+      'href',
+      'data:text/text;charset=utf-8,' + encodeURI(documents.activeNote.text)
+    )
+    element.setAttribute('download', documents.activeNote.downloadName)
+    element.click()
+  }
+}
+
+export default MenuBar

src/components/TabBar/TabBar.js

@@ -28,10 +28,6 @@ class TabBar extends Component {
           <button style={theme.getColorStyles()} onClick={this.next}>
             &gt;
           </button>
-          &nbsp;&nbsp;&nbsp;&nbsp;
-          <button style={theme.getColorStyles()} onClick={this.download}>
-            Download
-          </button>
         </div>
       </div>
     )
@@ -45,15 +41,6 @@ class TabBar extends Component {
     documents.moveToNextTab()
   }
 
-  download() {
-    let element = document.createElement('a')
-    element.setAttribute(
-      'href',
-      'data:text/text;charset=utf-8,' + encodeURI(documents.activeNote.text)
-    )
-    element.setAttribute('download', documents.activeNote.downloadName)
-    element.click()
-  }
 }
 
 export default TabBar