add menu item

packages/editor-ui/src/components/MainSidebar.vue

@@ -127,6 +127,12 @@
 
 				<MenuItemsIterator :items="sidebarMenuBottomItems" :root="true"/>
 
+				<div class="foot-menu-items">
+					<el-menu-item index="updates" class="updates">
+						<i><font-awesome-icon icon="gift"/></i>
+						<span slot="title" class="item-title-root">Updates available</span>
+					</el-menu-item>
+				</div>
 			</el-menu>
 
 		</div>
@@ -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;
+	}
 }
 
 </style>

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);

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