From 8328d7ad9adf32c813d245c4eaca63194b320e69 Mon Sep 17 00:00:00 2001
From: Jan Oberhauser <jan.oberhauser@gmail.com>
Date: Sun, 22 Sep 2019 21:59:45 +0200
Subject: [PATCH] :zap: Add Help-Menu

---
 .../editor-ui/src/components/MainSidebar.vue  | 60 +++++++++++++++----
 packages/editor-ui/src/main.ts                |  6 ++
 2 files changed, 56 insertions(+), 10 deletions(-)

diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index cd8e05c2af..2fe04c1d1b 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -26,7 +26,7 @@
 					</a>
 				</el-menu-item>
 
-				<el-submenu index="workflow">
+				<el-submenu index="workflow" title="Workflow">
 					<template slot="title">
 						<font-awesome-icon icon="network-wired"/>&nbsp;
 						<span slot="title" class="item-title-root">Workflows</span>
@@ -88,7 +88,7 @@
 					</el-menu-item>
 				</el-submenu>
 
-				<el-submenu index="credentials">
+				<el-submenu index="credentials" title="Credentials">
 					<template slot="title">
 						<font-awesome-icon icon="key"/>&nbsp;
 						<span slot="title" class="item-title-root">Credentials</span>
@@ -113,6 +113,38 @@
 					<span slot="title" class="item-title-root">Executions</span>
 				</el-menu-item>
 
+				<el-submenu index="help" class="help-menu" title="Help">
+					<template slot="title">
+						<font-awesome-icon icon="question"/>&nbsp;
+						<span slot="title" class="item-title-root">Help</span>
+					</template>
+
+					<el-menu-item index="help-documentation">
+						<template slot="title">
+							<a href="https://docs.n8n.io" target="_blank">
+								<font-awesome-icon icon="book"/>
+								<span slot="title" class="item-title">Documentation</span>
+							</a>
+						</template>
+					</el-menu-item>
+					<el-menu-item index="help-forum">
+						<template slot="title">
+							<a href="https://community.n8n.io" target="_blank">
+								<font-awesome-icon icon="users"/>
+								<span slot="title" class="item-title">Forum</span>
+							</a>
+						</template>
+					</el-menu-item>
+					<el-menu-item index="help-examples">
+						<template slot="title">
+							<a href="https://n8n.io/workflows" target="_blank">
+								<font-awesome-icon icon="network-wired"/>
+								<span slot="title" class="item-title">Workflows</span>
+							</a>
+						</template>
+					</el-menu-item>
+				</el-submenu>
+
 			</el-menu>
 
 		</div>
@@ -418,18 +450,26 @@ export default mixins(
 	transform: scale(1.1);
 }
 
-.el-menu-item.logo-item {
-	background-color: $--color-primary !important;
-	height: 65px;
+.el-menu-item {
+	a {
+		color: #666;
+	}
 
-	.icon {
-		position: relative;
-		height: 23px;
-		left: -10px;
-		top: -2px;
+	&.logo-item {
+		background-color: $--color-primary !important;
+		height: 65px;
+
+		.icon {
+			position: relative;
+			height: 23px;
+			left: -10px;
+			top: -2px;
+		}
 	}
 }
 
+
+
 a.logo-text {
 	position: relative;
 	top: -3px;
diff --git a/packages/editor-ui/src/main.ts b/packages/editor-ui/src/main.ts
index c0add38c09..7aa5018eb7 100644
--- a/packages/editor-ui/src/main.ts
+++ b/packages/editor-ui/src/main.ts
@@ -23,6 +23,7 @@ import {
 	faAngleUp,
 	faArrowRight,
 	faAt,
+	faBook,
 	faBug,
 	faCalendar,
 	faCheck,
@@ -59,6 +60,7 @@ import {
 	faPlay,
 	faPlayCircle,
 	faPlus,
+	faQuestion,
 	faQuestionCircle,
 	faRedo,
 	faRss,
@@ -78,6 +80,7 @@ import {
 	faTimes,
 	faTrash,
 	faUndo,
+	faUsers,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
@@ -90,6 +93,7 @@ library.add(faAngleRight);
 library.add(faAngleUp);
 library.add(faArrowRight);
 library.add(faAt);
+library.add(faBook);
 library.add(faBug);
 library.add(faCalendar);
 library.add(faCheck);
@@ -126,6 +130,7 @@ library.add(faPen);
 library.add(faPlay);
 library.add(faPlayCircle);
 library.add(faPlus);
+library.add(faQuestion);
 library.add(faQuestionCircle);
 library.add(faRedo);
 library.add(faRss);
@@ -145,6 +150,7 @@ library.add(faThLarge);
 library.add(faTimes);
 library.add(faTrash);
 library.add(faUndo);
+library.add(faUsers);
 
 Vue.component('font-awesome-icon', FontAwesomeIcon);