From 22f98fa8a797d53dba8ef2b53e2b03bdacf142c3 Mon Sep 17 00:00:00 2001
From: Cmdr McDonald <Cmdr.McDonald@gmail.com>
Date: Fri, 13 Jan 2017 10:27:13 +0000
Subject: [PATCH] Add framework for help

---
 src/app/components/Header.jsx | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/src/app/components/Header.jsx b/src/app/components/Header.jsx
index 8b679a6b..40a158c1 100644
--- a/src/app/components/Header.jsx
+++ b/src/app/components/Header.jsx
@@ -74,6 +74,7 @@ export default class Header extends TranslatedComponent {
     this._openBuilds = this._openMenu.bind(this, 'b');
     this._openComp = this._openMenu.bind(this, 'comp');
     this._openSettings = this._openMenu.bind(this, 'settings');
+    this._openHelp = this._openMenu.bind(this, 'help');
     this.languageOptions = [];
     this.insuranceOptions = [];
     this.state = {
@@ -359,6 +360,23 @@ export default class Header extends TranslatedComponent {
     );
   }
 
+  /**
+   * Generate the help menu
+   * @return {React.Component} Menu
+   */
+  _getHelpMenu() {
+    let translate = this.context.language.translate;
+
+    return (
+      <div className='menu-list' onClick={ (e) => e.stopPropagation() } style={{ whiteSpace: 'nowrap' }}>
+        <div>{translate('introduction')}</div>
+        <div>{translate('importing your build')}</div>
+        <div>{translate('engineers')}</div>
+        <div>{translate('tricks and tips')}</div>
+      </div>
+    );
+  }
+
   /**
    * Generate the settings menu
    * @return {React.Component} Menu
@@ -521,6 +539,12 @@ export default class Header extends TranslatedComponent {
           </div>
           {openedMenu == 'settings' ? this._getSettingsMenu() : null}
         </div>
+        <div className='r menu'>
+          <div className={cn('menu-header', { selected: openedMenu == 'help' })} onClick={this._openHelp}>
+            <Cogs className='xl warning'/><span className='menu-item-label'>{translate('help')}</span>
+          </div>
+          {openedMenu == 'help' ? this._getHelpMenu() : null}
+        </div>
       </header>
     );
   }