Add support to dynamically add menu items

* add menu items POC

* remove sidebar hook

* use getters

* update menu to add items

* add home icon for CLD-202

* center icon

* address comments

*  Minor improvements

Co-authored-by: Jan Oberhauser <jan.oberhauser@gmail.com>
This commit is contained in:
Mutasem Aldmour
2021-04-09 23:44:53 +03:00
committed by GitHub
parent 2273a4cff2
commit 75dd058ce2
4 changed files with 76 additions and 3 deletions

View File

@@ -21,6 +21,22 @@
</a>
</el-menu-item>
<el-menu-item
v-for="item in sidebarMenuTopItems"
:key="item.id"
:index="item.id"
>
<a
v-if="item.type === 'link'"
:href="item.properties.href"
:target="item.properties.newWindow ? '_blank' : '_self'"
class="primary-item"
>
<font-awesome-icon :icon="item.properties.icon" />
<span slot="title" class="item-title-root">{{ item.properties.title }}</span>
</a>
</el-menu-item>
<el-submenu index="workflow" title="Workflow">
<template slot="title">
<font-awesome-icon icon="network-wired"/>&nbsp;
@@ -152,6 +168,22 @@
</el-menu-item>
</el-submenu>
<el-menu-item
v-for="item in sidebarMenuBottomItems"
:key="item.id"
:index="item.id"
>
<a
v-if="item.type === 'link'"
:href="item.properties.href"
:target="item.properties.newWindow ? '_blank' : '_self'"
class="primary-item"
>
<font-awesome-icon :icon="item.properties.icon" />
<span slot="title" class="item-title-root">{{ item.properties.title }}</span>
</a>
</el-menu-item>
</el-menu>
</div>
@@ -167,6 +199,7 @@ import {
IExecutionResponse,
IExecutionsStopData,
IWorkflowDataUpdate,
IMenuItem,
} from '../Interface';
import About from '@/components/About.vue';
@@ -266,6 +299,12 @@ export default mixins(
workflowRunning (): boolean {
return this.$store.getters.isActionActive('workflowRunning');
},
sidebarMenuTopItems(): IMenuItem[] {
return this.$store.getters.sidebarMenuItems.filter((item: IMenuItem) => item.position === 'top');
},
sidebarMenuBottomItems(): IMenuItem[] {
return this.$store.getters.sidebarMenuItems.filter((item: IMenuItem) => item.position === 'bottom');
},
},
methods: {
clearExecutionData () {
@@ -533,6 +572,11 @@ export default mixins(
.el-menu-item {
a {
color: #666;
&.primary-item {
color: $--color-primary;
vertical-align: baseline;
}
}
&.logo-item {