diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index 09faab9bc7e..a8f50065d3e 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -127,6 +127,12 @@
+
@@ -570,6 +576,33 @@ a.logo {
&.expanded {
width: $--sidebar-expanded-width;
}
+
+ ul {
+ display: flex;
+ flex-direction: column;
+ }
+}
+
+.foot-menu-items {
+ display: flex;
+ flex-grow: 1;
+ flex-direction: column;
+ justify-content: flex-end;
+}
+
+.el-menu-item.updates {
+ color: $--sidebar-inactive-color;
+
+ &:hover {
+ color: $--sidebar-active-color;
+ }
+
+ i:after {
+ content: "\2022";
+ color: $--sidebar-active-color;
+ font-size: 30px;
+ position: absolute;
+ }
}
diff --git a/packages/editor-ui/src/main.ts b/packages/editor-ui/src/main.ts
index 91ad8ab948d..103ea70bf28 100644
--- a/packages/editor-ui/src/main.ts
+++ b/packages/editor-ui/src/main.ts
@@ -62,6 +62,7 @@ import {
faFileImport,
faFilePdf,
faFolderOpen,
+ faGift,
faHdd,
faHome,
faHourglass,
@@ -151,6 +152,7 @@ library.add(faFileExport);
library.add(faFileImport);
library.add(faFilePdf);
library.add(faFolderOpen);
+library.add(faGift);
library.add(faHdd);
library.add(faHome);
library.add(faHourglass);
diff --git a/packages/editor-ui/src/n8n-theme-variables.scss b/packages/editor-ui/src/n8n-theme-variables.scss
index 13df4c832c4..3ae60847a5c 100644
--- a/packages/editor-ui/src/n8n-theme-variables.scss
+++ b/packages/editor-ui/src/n8n-theme-variables.scss
@@ -44,8 +44,12 @@ $--custom-input-border-shadow: 1px solid $--custom-input-border-color;
$--header-height: 65px;
+// sidebar
$--sidebar-width: 65px;
$--sidebar-expanded-width: 200px;
+$--sidebar-inactive-color: #909399;
+$--sidebar-active-color: $--color-primary;
+
$--tags-manager-min-height: 300px;
// based on element.io breakpoints