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 @@ +
+ + + Updates available + +
@@ -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