n8n-editor-ui 1.57.0 → 1.58.1

package/dist/assets/{MainSidebar-DnSIEh1g.js → MainSidebar-DfnOQqYS.js}

@@ -1,18 +1,18 @@
-import { I as defineComponent, a as ref, f as computed, an as resolveComponent, J as openBlock, K as createElementBlock, u as unref, _ as normalizeClass, L as createBaseVNode, a8 as createVNode, a6 as createTextVNode, a7 as toDisplayString, a3 as withCtx, V as createBlock, U as createCommentVNode, $ as normalizeStyle, n as nextTick, aM as useRouter, q as onMounted, R as Fragment, af as renderList, aB as pushScopeId, aC as popScopeId, aE as useRoute, ah as createSlots } from "./vendor-tVazXwC6.js";
-import { f as createEventBus, _ as _export_sfc } from "./n8n-NifPGZSM.js";
-import { O as useLoadingService, e as useUIStore, l as useSourceControlStore, u as useToast, r as hasPermission, v as useI18n, G as SOURCE_CONTROL_PUSH_MODAL_KEY, Q as sourceControlEventBus, R as SOURCE_CONTROL_PULL_MODAL_KEY, U as get, X as STORES, Y as useCloudPlanStore, j as useRootStore, Z as useStorage, w as useTelemetry, n as useProjectsStore, V as VIEWS, d as useDebounce, x as useMessage, _ as useTemplatesStore, m as useWorkflowsStore, $ as useVersionsStore, a as useUsersStore, b as useSettingsStore, a0 as VERSIONS_MODAL_KEY, a1 as ABOUT_MODAL_KEY, a2 as useExternalHooks } from "./index-BMqv_cxE.js";
+import { I as defineComponent, a as ref, f as computed, n as nextTick, an as resolveComponent, J as openBlock, K as createElementBlock, _ as normalizeClass, u as unref, $ as normalizeStyle, L as createBaseVNode, a8 as createVNode, a6 as createTextVNode, a7 as toDisplayString, a3 as withCtx, V as createBlock, U as createCommentVNode, aB as pushScopeId, aC as popScopeId, aM as useRouter, q as onMounted, R as Fragment, af as renderList, aE as useRoute, m as onBeforeUnmount, ah as createSlots } from "./vendor-tVazXwC6.js";
+import { f as createEventBus, _ as _export_sfc } from "./n8n-Z2397JES.js";
+import { Q as useLoadingService, e as useUIStore, o as useSourceControlStore, u as useToast, j as useI18n, v as hasPermission, H as SOURCE_CONTROL_PUSH_MODAL_KEY, R as sourceControlEventBus, U as SOURCE_CONTROL_PULL_MODAL_KEY, X as get, Y as STORES, Z as useCloudPlanStore, m as useRootStore, $ as useStorage, x as useTelemetry, p as useProjectsStore, V as VIEWS, b as useSettingsStore, a0 as useTemplatesStore, a as useUsersStore, a1 as useVersionsStore, k as useWorkflowsStore, d as useDebounce, a2 as useExternalHooks, a3 as VERSIONS_MODAL_KEY, a4 as ABOUT_MODAL_KEY } from "./index-D1NZCYzm.js";
 import { D as DateTime } from "./luxon-Bt_g4NOb.js";
-import { d as defineStore, m as mapStores } from "./pinia-DvV9jJ-A.js";
-import { u as useUserHelpers } from "./useUserHelpers-Bhb_a-iT.js";
+import { d as defineStore } from "./pinia-DvV9jJ-A.js";
+import { u as useUserHelpers } from "./useUserHelpers-WhAIJpQu.js";
 import "./esprima-next-DUEu30kB.js";
 import "./axios-B4zXCSve.js";
 import "./lodash-es-kRWQHL5K.js";
-import "./@vueuse/core-C-N7SOS8.js";
+import "./@vueuse/core-BHDhJRX_.js";
 import "./uuid-sKupIUZ4.js";
 import "./flatted-D70IerrI.js";
 import "./bowser-C3wWO1p5.js";
-import "./@n8n/permissions-BdHAniXb.js";
-import "./dateformat-U_ybGERk.js";
+import "./@n8n/permissions-BxSXRD9U.js";
+import "./dateformat-BnMKt03f.js";
 import "./vue-i18n-DNQ-lWfW.js";
 import "./@n8n/codemirror-lang-CIGGB1t0.js";
 import "./@lezer/common-CnY9etib.js";
@@ -24,7 +24,7 @@ import "./@jsplumb/common-s1StEx7B.js";
 import "./@jsplumb/connector-bezier-D659hq4c.js";
 import "./@jsplumb/browser-ui-BphmFVJY.js";
 import "./codemirror-lang-html-n8n-CXTCIWzP.js";
-import "./fast-json-stable-stringify-DFVeKQSP.js";
+import "./fast-json-stable-stringify-D53fIhuw.js";
 import "./timeago.js-CgQus8nl.js";
 import "./qrcode.vue-Di8rc46A.js";
 import "./vue3-touch-events-DVOgU3fI.js";
@@ -226,7 +226,7 @@ const _hoisted_1$2 = /* @__PURE__ */ createBaseVNode("div", null, null, -1);
 const _hoisted_2$2 = [
   _hoisted_1$2
 ];
-function _sfc_render$1(_ctx, _cache) {
+function _sfc_render(_ctx, _cache) {
   const _component_font_awesome_icon = resolveComponent("font-awesome-icon");
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(_ctx.$style["gift-icon"])
@@ -240,7 +240,7 @@ function _sfc_render$1(_ctx, _cache) {
 const cssModules$3 = {
   "$style": style0$3
 };
-const __unplugin_components_2 = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$1], ["__cssModules", cssModules$3]]);
+const __unplugin_components_2 = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render], ["__cssModules", cssModules$3]]);
 async function getBecomeCreatorCta(context) {
   const response = await get(context.baseUrl, "/cta/become-creator");
   return response;
@@ -569,280 +569,430 @@ const cssModules$1 = {
   "$style": style0$1
 };
 const __unplugin_components_0 = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__cssModules", cssModules$1], ["__scopeId", "data-v-0cb58cfa"]]);
-const _sfc_main = defineComponent({
-  name: "MainSidebar",
-  components: {
-    GiftNotificationIcon: __unplugin_components_2,
-    MainSidebarSourceControl: __unplugin_components_3,
-    BecomeTemplateCreatorCta: __unplugin_components_1,
-    ProjectNavigation: __unplugin_components_0
-  },
-  setup() {
-    const externalHooks = useExternalHooks();
+const _hoisted_1 = ["src"];
+const _hoisted_2 = {
+  class: "ml-3xs",
+  "data-test-id": "main-sidebar-user-menu"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "MainSidebar",
+  setup(__props) {
+    const becomeTemplateCreatorStore = useBecomeTemplateCreatorStore();
+    const cloudPlanStore = useCloudPlanStore();
+    const rootStore = useRootStore();
+    const settingsStore = useSettingsStore();
+    const templatesStore = useTemplatesStore();
+    const uiStore = useUIStore();
+    const usersStore = useUsersStore();
+    const versionsStore = useVersionsStore();
+    const workflowsStore = useWorkflowsStore();
     const { callDebounced } = useDebounce();
-    const router = useRouter();
+    const externalHooks = useExternalHooks();
+    const locale = useI18n();
     const route = useRoute();
-    return {
-      externalHooks,
-      callDebounced,
-      ...useMessage(),
-      ...useUserHelpers(router, route)
-    };
-  },
-  data() {
-    return {
-      basePath: "",
-      fullyExpanded: false
-    };
-  },
-  computed: {
-    ...mapStores(
-      useRootStore,
-      useSettingsStore,
-      useUIStore,
-      useUsersStore,
-      useVersionsStore,
-      useWorkflowsStore,
-      useCloudPlanStore,
-      useSourceControlStore,
-      useBecomeTemplateCreatorStore,
-      useTemplatesStore
-    ),
-    logoPath() {
-      return this.basePath + (this.isCollapsed ? "static/logo/collapsed.svg" : this.uiStore.logo);
-    },
-    hasVersionUpdates() {
-      return this.settingsStore.settings.releaseChannel === "stable" && this.versionsStore.hasVersionUpdates;
-    },
-    nextVersions() {
-      return this.versionsStore.nextVersions;
-    },
-    isCollapsed() {
-      return this.uiStore.sidebarMenuCollapsed;
-    },
-    showUserArea() {
-      return hasPermission(["authenticated"]);
-    },
-    workflowExecution() {
-      return this.workflowsStore.getWorkflowExecution;
-    },
-    userMenuItems() {
-      return [
-        {
-          id: "settings",
-          label: this.$locale.baseText("settings")
-        },
-        {
-          id: "logout",
-          label: this.$locale.baseText("auth.signout")
+    const router = useRouter();
+    const telemetry = useTelemetry();
+    useUserHelpers(router, route);
+    const user = ref(null);
+    const basePath = ref("");
+    const fullyExpanded = ref(false);
+    const userMenuItems = ref([
+      {
+        id: "settings",
+        label: locale.baseText("settings")
+      },
+      {
+        id: "logout",
+        label: locale.baseText("auth.signout")
+      }
+    ]);
+    const mainMenuItems = ref([
+      {
+        id: "cloud-admin",
+        position: "bottom",
+        label: "Admin Panel",
+        icon: "cloud",
+        available: settingsStore.isCloudDeployment && hasPermission(["instanceOwner"])
+      },
+      {
+        // Link to in-app templates, available if custom templates are enabled
+        id: "templates",
+        icon: "box-open",
+        label: locale.baseText("mainSidebar.templates"),
+        position: "bottom",
+        available: settingsStore.isTemplatesEnabled && templatesStore.hasCustomTemplatesHost,
+        route: { to: { name: VIEWS.TEMPLATES } }
+      },
+      {
+        // Link to website templates, available if custom templates are not enabled
+        id: "templates",
+        icon: "box-open",
+        label: locale.baseText("mainSidebar.templates"),
+        position: "bottom",
+        available: settingsStore.isTemplatesEnabled && !templatesStore.hasCustomTemplatesHost,
+        link: {
+          href: templatesStore.websiteTemplateRepositoryURL,
+          target: "_blank"
         }
-      ];
-    },
-    mainMenuItems() {
-      const items = [
-        {
-          id: "cloud-admin",
-          position: "bottom",
-          label: "Admin Panel",
-          icon: "cloud",
-          available: this.settingsStore.isCloudDeployment && hasPermission(["instanceOwner"])
-        },
-        {
-          // Link to in-app templates, available if custom templates are enabled
-          id: "templates",
-          icon: "box-open",
-          label: this.$locale.baseText("mainSidebar.templates"),
-          position: "bottom",
-          available: this.settingsStore.isTemplatesEnabled && this.templatesStore.hasCustomTemplatesHost,
-          route: { to: { name: VIEWS.TEMPLATES } }
-        },
-        {
-          // Link to website templates, available if custom templates are not enabled
-          id: "templates",
-          icon: "box-open",
-          label: this.$locale.baseText("mainSidebar.templates"),
-          position: "bottom",
-          available: this.settingsStore.isTemplatesEnabled && !this.templatesStore.hasCustomTemplatesHost,
-          link: {
-            href: this.templatesStore.websiteTemplateRepositoryURL,
-            target: "_blank"
-          }
-        },
-        {
-          id: "variables",
-          icon: "variable",
-          label: this.$locale.baseText("mainSidebar.variables"),
-          customIconSize: "medium",
-          position: "bottom",
-          route: { to: { name: VIEWS.VARIABLES } }
-        },
-        {
-          id: "executions",
-          icon: "tasks",
-          label: this.$locale.baseText("mainSidebar.executions"),
-          position: "bottom",
-          route: { to: { name: VIEWS.EXECUTIONS } }
-        },
-        {
-          id: "help",
-          icon: "question",
-          label: this.$locale.baseText("mainSidebar.help"),
-          position: "bottom",
-          children: [
-            {
-              id: "quickstart",
-              icon: "video",
-              label: this.$locale.baseText("mainSidebar.helpMenuItems.quickstart"),
-              link: {
-                href: "https://www.youtube.com/watch?v=1MwSoB0gnM4",
-                target: "_blank"
-              }
-            },
-            {
-              id: "docs",
-              icon: "book",
-              label: this.$locale.baseText("mainSidebar.helpMenuItems.documentation"),
-              link: {
-                href: "https://docs.n8n.io?utm_source=n8n_app&utm_medium=app_sidebar",
-                target: "_blank"
-              }
-            },
-            {
-              id: "forum",
-              icon: "users",
-              label: this.$locale.baseText("mainSidebar.helpMenuItems.forum"),
-              link: {
-                href: "https://community.n8n.io?utm_source=n8n_app&utm_medium=app_sidebar",
-                target: "_blank"
-              }
-            },
-            {
-              id: "examples",
-              icon: "graduation-cap",
-              label: this.$locale.baseText("mainSidebar.helpMenuItems.course"),
-              link: {
-                href: "https://docs.n8n.io/courses/",
-                target: "_blank"
-              }
-            },
-            {
-              id: "about",
-              icon: "info",
-              label: this.$locale.baseText("mainSidebar.aboutN8n"),
-              position: "bottom"
+      },
+      {
+        id: "variables",
+        icon: "variable",
+        label: locale.baseText("mainSidebar.variables"),
+        customIconSize: "medium",
+        position: "bottom",
+        route: { to: { name: VIEWS.VARIABLES } }
+      },
+      {
+        id: "executions",
+        icon: "tasks",
+        label: locale.baseText("mainSidebar.executions"),
+        position: "bottom",
+        route: { to: { name: VIEWS.EXECUTIONS } }
+      },
+      {
+        id: "help",
+        icon: "question",
+        label: locale.baseText("mainSidebar.help"),
+        position: "bottom",
+        children: [
+          {
+            id: "quickstart",
+            icon: "video",
+            label: locale.baseText("mainSidebar.helpMenuItems.quickstart"),
+            link: {
+              href: "https://www.youtube.com/watch?v=1MwSoB0gnM4",
+              target: "_blank"
             }
-          ]
-        }
-      ];
-      return items;
-    },
-    userIsTrialing() {
-      return this.cloudPlanStore.userIsTrialing;
-    }
-  },
-  async mounted() {
-    this.basePath = this.rootStore.baseUrl;
-    if (this.$refs.user) {
-      void this.externalHooks.run("mainSidebar.mounted", {
-        userRef: this.$refs.user
+          },
+          {
+            id: "docs",
+            icon: "book",
+            label: locale.baseText("mainSidebar.helpMenuItems.documentation"),
+            link: {
+              href: "https://docs.n8n.io?utm_source=n8n_app&utm_medium=app_sidebar",
+              target: "_blank"
+            }
+          },
+          {
+            id: "forum",
+            icon: "users",
+            label: locale.baseText("mainSidebar.helpMenuItems.forum"),
+            link: {
+              href: "https://community.n8n.io?utm_source=n8n_app&utm_medium=app_sidebar",
+              target: "_blank"
+            }
+          },
+          {
+            id: "examples",
+            icon: "graduation-cap",
+            label: locale.baseText("mainSidebar.helpMenuItems.course"),
+            link: {
+              href: "https://docs.n8n.io/courses/",
+              target: "_blank"
+            }
+          },
+          {
+            id: "about",
+            icon: "info",
+            label: locale.baseText("mainSidebar.aboutN8n"),
+            position: "bottom"
+          }
+        ]
+      }
+    ]);
+    const isCollapsed = computed(() => uiStore.sidebarMenuCollapsed);
+    const logoPath = computed(
+      () => basePath.value + (isCollapsed.value ? "static/logo/collapsed.svg" : uiStore.logo)
+    );
+    const hasVersionUpdates = computed(
+      () => settingsStore.settings.releaseChannel === "stable" && versionsStore.hasVersionUpdates
+    );
+    const nextVersions = computed(() => versionsStore.nextVersions);
+    const showUserArea = computed(() => hasPermission(["authenticated"]));
+    const userIsTrialing = computed(() => cloudPlanStore.userIsTrialing);
+    onMounted(async () => {
+      window.addEventListener("resize", onResize);
+      basePath.value = rootStore.baseUrl;
+      if (user.value) {
+        void externalHooks.run("mainSidebar.mounted", {
+          userRef: user.value
+        });
+      }
+      await nextTick(() => {
+        uiStore.sidebarMenuCollapsed = window.innerWidth < 900;
+        fullyExpanded.value = !isCollapsed.value;
       });
-    }
-    void this.$nextTick(() => {
-      this.uiStore.sidebarMenuCollapsed = window.innerWidth < 900;
-      this.fullyExpanded = !this.isCollapsed;
+      becomeTemplateCreatorStore.startMonitoringCta();
     });
-    this.becomeTemplateCreatorStore.startMonitoringCta();
-  },
-  created() {
-    window.addEventListener("resize", this.onResize);
-  },
-  beforeUnmount() {
-    this.becomeTemplateCreatorStore.stopMonitoringCta();
-    window.removeEventListener("resize", this.onResize);
-  },
-  methods: {
-    trackHelpItemClick(itemType) {
-      this.$telemetry.track("User clicked help resource", {
-        type: itemType,
-        workflow_id: this.workflowsStore.workflowId
-      });
-    },
-    trackTemplatesClick() {
+    onBeforeUnmount(() => {
+      becomeTemplateCreatorStore.stopMonitoringCta();
+      window.removeEventListener("resize", onResize);
+    });
+    const trackTemplatesClick = () => {
       var _a;
-      this.$telemetry.track("User clicked on templates", {
-        role: (_a = this.usersStore.currentUserCloudInfo) == null ? void 0 : _a.role,
-        active_workflow_count: this.workflowsStore.activeWorkflows.length
+      telemetry.track("User clicked on templates", {
+        role: (_a = usersStore.currentUserCloudInfo) == null ? void 0 : _a.role,
+        active_workflow_count: workflowsStore.activeWorkflows.length
+      });
+    };
+    const trackHelpItemClick = (itemType) => {
+      telemetry.track("User clicked help resource", {
+        type: itemType,
+        workflow_id: workflowsStore.workflowId
       });
-    },
-    async onUserActionToggle(action) {
+    };
+    const onUserActionToggle = (action) => {
       switch (action) {
         case "logout":
-          this.onLogout();
+          onLogout();
           break;
         case "settings":
-          void this.$router.push({ name: VIEWS.PERSONAL_SETTINGS });
+          void router.push({ name: VIEWS.PERSONAL_SETTINGS });
           break;
         default:
           break;
       }
-    },
-    onLogout() {
-      void this.$router.push({ name: VIEWS.SIGNOUT });
-    },
-    toggleCollapse() {
-      this.uiStore.toggleSidebarMenuCollapse();
-      if (!this.isCollapsed) {
+    };
+    const onLogout = () => {
+      void router.push({ name: VIEWS.SIGNOUT });
+    };
+    const toggleCollapse = () => {
+      uiStore.toggleSidebarMenuCollapse();
+      if (!isCollapsed.value) {
         setTimeout(() => {
-          this.fullyExpanded = !this.isCollapsed;
+          fullyExpanded.value = !isCollapsed.value;
         }, 300);
       } else {
-        this.fullyExpanded = !this.isCollapsed;
+        fullyExpanded.value = !isCollapsed.value;
       }
-    },
-    openUpdatesPanel() {
-      this.uiStore.openModal(VERSIONS_MODAL_KEY);
-    },
-    async handleSelect(key) {
+    };
+    const openUpdatesPanel = () => {
+      uiStore.openModal(VERSIONS_MODAL_KEY);
+    };
+    const handleSelect = (key) => {
       switch (key) {
         case "templates":
-          if (this.settingsStore.isTemplatesEnabled && !this.templatesStore.hasCustomTemplatesHost) {
-            this.trackTemplatesClick();
+          if (settingsStore.isTemplatesEnabled && !templatesStore.hasCustomTemplatesHost) {
+            trackTemplatesClick();
           }
           break;
         case "about": {
-          this.trackHelpItemClick("about");
-          this.uiStore.openModal(ABOUT_MODAL_KEY);
+          trackHelpItemClick("about");
+          uiStore.openModal(ABOUT_MODAL_KEY);
           break;
         }
         case "cloud-admin": {
-          void this.cloudPlanStore.redirectToDashboard();
+          void cloudPlanStore.redirectToDashboard();
           break;
         }
         case "quickstart":
         case "docs":
         case "forum":
         case "examples": {
-          this.trackHelpItemClick(key);
+          trackHelpItemClick(key);
           break;
         }
         default:
           break;
       }
-    },
-    onResize(event) {
-      void this.callDebounced(this.onResizeEnd, { debounceTime: 100 }, event);
-    },
-    async onResizeEnd(event) {
+    };
+    const onResize = (event) => {
+      void callDebounced(onResizeEnd, { debounceTime: 100 }, event);
+    };
+    const onResizeEnd = async (event) => {
       const browserWidth = event.target.outerWidth;
-      await this.checkWidthAndAdjustSidebar(browserWidth);
-    },
-    async checkWidthAndAdjustSidebar(width) {
+      await checkWidthAndAdjustSidebar(browserWidth);
+    };
+    const checkWidthAndAdjustSidebar = async (width) => {
       if (width < 900) {
-        this.uiStore.sidebarMenuCollapsed = true;
-        await this.$nextTick();
-        this.fullyExpanded = !this.isCollapsed;
+        uiStore.sidebarMenuCollapsed = true;
+        await nextTick();
+        fullyExpanded.value = !isCollapsed.value;
       }
-    }
+    };
+    return (_ctx, _cache) => {
+      const _component_n8n_icon = resolveComponent("n8n-icon");
+      const _component_ProjectNavigation = __unplugin_components_0;
+      const _component_BecomeTemplateCreatorCta = __unplugin_components_1;
+      const _component_GiftNotificationIcon = __unplugin_components_2;
+      const _component_n8n_text = resolveComponent("n8n-text");
+      const _component_MainSidebarSourceControl = __unplugin_components_3;
+      const _component_n8n_avatar = resolveComponent("n8n-avatar");
+      const _component_el_dropdown_item = resolveComponent("el-dropdown-item");
+      const _component_el_dropdown_menu = resolveComponent("el-dropdown-menu");
+      const _component_el_dropdown = resolveComponent("el-dropdown");
+      const _component_n8n_action_dropdown = resolveComponent("n8n-action-dropdown");
+      const _component_n8n_menu = resolveComponent("n8n-menu");
+      return openBlock(), createElementBlock("div", {
+        id: "side-menu",
+        class: normalizeClass({
+          ["side-menu"]: true,
+          [_ctx.$style.sideMenu]: true,
+          [_ctx.$style.sideMenuCollapsed]: isCollapsed.value
+        })
+      }, [
+        createBaseVNode("div", {
+          id: "collapse-change-button",
+          class: normalizeClass(["clickable", _ctx.$style.sideMenuCollapseButton]),
+          onClick: toggleCollapse
+        }, [
+          isCollapsed.value ? (openBlock(), createBlock(_component_n8n_icon, {
+            key: 0,
+            icon: "chevron-right",
+            size: "xsmall",
+            class: "ml-5xs"
+          })) : (openBlock(), createBlock(_component_n8n_icon, {
+            key: 1,
+            icon: "chevron-left",
+            size: "xsmall",
+            class: "mr-5xs"
+          }))
+        ], 2),
+        createVNode(_component_n8n_menu, {
+          items: mainMenuItems.value,
+          collapsed: isCollapsed.value,
+          onSelect: handleSelect
+        }, createSlots({
+          header: withCtx(() => {
+            var _a;
+            return [
+              createBaseVNode("div", {
+                class: normalizeClass(_ctx.$style.logo)
+              }, [
+                createBaseVNode("img", {
+                  src: logoPath.value,
+                  "data-test-id": "n8n-logo",
+                  class: normalizeClass(_ctx.$style.icon),
+                  alt: "n8n"
+                }, null, 10, _hoisted_1)
+              ], 2),
+              createVNode(_component_ProjectNavigation, {
+                collapsed: isCollapsed.value,
+                "plan-name": (_a = unref(cloudPlanStore).currentPlanData) == null ? void 0 : _a.displayName
+              }, null, 8, ["collapsed", "plan-name"])
+            ];
+          }),
+          beforeLowerMenu: withCtx(() => [
+            fullyExpanded.value && !userIsTrialing.value ? (openBlock(), createBlock(_component_BecomeTemplateCreatorCta, { key: 0 })) : createCommentVNode("", true)
+          ]),
+          menuSuffix: withCtx(() => [
+            createBaseVNode("div", null, [
+              hasVersionUpdates.value ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                "data-test-id": "version-updates-panel-button",
+                class: normalizeClass(_ctx.$style.updates),
+                onClick: openUpdatesPanel
+              }, [
+                createBaseVNode("div", {
+                  class: normalizeClass(_ctx.$style.giftContainer)
+                }, [
+                  createVNode(_component_GiftNotificationIcon)
+                ], 2),
+                createVNode(_component_n8n_text, {
+                  class: normalizeClass({ ["ml-xs"]: true, [_ctx.$style.expanded]: fullyExpanded.value }),
+                  color: "text-base"
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(nextVersions.value.length > 99 ? "99+" : nextVersions.value.length) + " update" + toDisplayString(nextVersions.value.length > 1 ? "s" : ""), 1)
+                  ]),
+                  _: 1
+                }, 8, ["class"])
+              ], 2)) : createCommentVNode("", true),
+              createVNode(_component_MainSidebarSourceControl, { "is-collapsed": isCollapsed.value }, null, 8, ["is-collapsed"])
+            ])
+          ]),
+          _: 2
+        }, [
+          showUserArea.value ? {
+            name: "footer",
+            fn: withCtx(() => [
+              createBaseVNode("div", {
+                ref_key: "user",
+                ref: user,
+                class: normalizeClass(_ctx.$style.userArea)
+              }, [
+                createBaseVNode("div", _hoisted_2, [
+                  createVNode(_component_el_dropdown, {
+                    placement: "right-end",
+                    trigger: "click",
+                    onCommand: onUserActionToggle
+                  }, createSlots({
+                    default: withCtx(() => {
+                      var _a, _b;
+                      return [
+                        createBaseVNode("div", {
+                          class: normalizeClass({ [_ctx.$style.avatar]: true, ["clickable"]: isCollapsed.value })
+                        }, [
+                          createVNode(_component_n8n_avatar, {
+                            "first-name": (_a = unref(usersStore).currentUser) == null ? void 0 : _a.firstName,
+                            "last-name": (_b = unref(usersStore).currentUser) == null ? void 0 : _b.lastName,
+                            size: "small"
+                          }, null, 8, ["first-name", "last-name"])
+                        ], 2)
+                      ];
+                    }),
+                    _: 2
+                  }, [
+                    isCollapsed.value ? {
+                      name: "dropdown",
+                      fn: withCtx(() => [
+                        createVNode(_component_el_dropdown_menu, null, {
+                          default: withCtx(() => [
+                            createVNode(_component_el_dropdown_item, { command: "settings" }, {
+                              default: withCtx(() => [
+                                createTextVNode(toDisplayString(_ctx.$locale.baseText("settings")), 1)
+                              ]),
+                              _: 1
+                            }),
+                            createVNode(_component_el_dropdown_item, { command: "logout" }, {
+                              default: withCtx(() => [
+                                createTextVNode(toDisplayString(_ctx.$locale.baseText("auth.signout")), 1)
+                              ]),
+                              _: 1
+                            })
+                          ]),
+                          _: 1
+                        })
+                      ]),
+                      key: "0"
+                    } : void 0
+                  ]), 1024)
+                ]),
+                createBaseVNode("div", {
+                  class: normalizeClass({ ["ml-2xs"]: true, [_ctx.$style.userName]: true, [_ctx.$style.expanded]: fullyExpanded.value })
+                }, [
+                  createVNode(_component_n8n_text, {
+                    size: "small",
+                    bold: true,
+                    color: "text-dark"
+                  }, {
+                    default: withCtx(() => {
+                      var _a;
+                      return [
+                        createTextVNode(toDisplayString((_a = unref(usersStore).currentUser) == null ? void 0 : _a.fullName), 1)
+                      ];
+                    }),
+                    _: 1
+                  })
+                ], 2),
+                createBaseVNode("div", {
+                  class: normalizeClass({ [_ctx.$style.userActions]: true, [_ctx.$style.expanded]: fullyExpanded.value })
+                }, [
+                  createVNode(_component_n8n_action_dropdown, {
+                    items: userMenuItems.value,
+                    placement: "top-start",
+                    "data-test-id": "user-menu",
+                    onSelect: onUserActionToggle
+                  }, null, 8, ["items"])
+                ], 2)
+              ], 2)
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["items", "collapsed"])
+      ], 2);
+    };
   }
 });
 const sideMenu = "_sideMenu_1qnza_1";
@@ -865,195 +1015,10 @@ const style0 = {
   userName,
   userActions
 };
-const _hoisted_1 = ["src"];
-const _hoisted_2 = {
-  class: "ml-3xs",
-  "data-test-id": "main-sidebar-user-menu"
-};
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_n8n_icon = resolveComponent("n8n-icon");
-  const _component_ProjectNavigation = __unplugin_components_0;
-  const _component_BecomeTemplateCreatorCta = __unplugin_components_1;
-  const _component_GiftNotificationIcon = __unplugin_components_2;
-  const _component_n8n_text = resolveComponent("n8n-text");
-  const _component_MainSidebarSourceControl = __unplugin_components_3;
-  const _component_n8n_avatar = resolveComponent("n8n-avatar");
-  const _component_el_dropdown_item = resolveComponent("el-dropdown-item");
-  const _component_el_dropdown_menu = resolveComponent("el-dropdown-menu");
-  const _component_el_dropdown = resolveComponent("el-dropdown");
-  const _component_n8n_action_dropdown = resolveComponent("n8n-action-dropdown");
-  const _component_n8n_menu = resolveComponent("n8n-menu");
-  return openBlock(), createElementBlock("div", {
-    id: "side-menu",
-    class: normalizeClass({
-      ["side-menu"]: true,
-      [_ctx.$style.sideMenu]: true,
-      [_ctx.$style.sideMenuCollapsed]: _ctx.isCollapsed
-    })
-  }, [
-    createBaseVNode("div", {
-      id: "collapse-change-button",
-      class: normalizeClass(["clickable", _ctx.$style.sideMenuCollapseButton]),
-      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.toggleCollapse && _ctx.toggleCollapse(...args))
-    }, [
-      _ctx.isCollapsed ? (openBlock(), createBlock(_component_n8n_icon, {
-        key: 0,
-        icon: "chevron-right",
-        size: "xsmall",
-        class: "ml-5xs"
-      })) : (openBlock(), createBlock(_component_n8n_icon, {
-        key: 1,
-        icon: "chevron-left",
-        size: "xsmall",
-        class: "mr-5xs"
-      }))
-    ], 2),
-    createVNode(_component_n8n_menu, {
-      items: _ctx.mainMenuItems,
-      collapsed: _ctx.isCollapsed,
-      onSelect: _ctx.handleSelect
-    }, createSlots({
-      header: withCtx(() => {
-        var _a;
-        return [
-          createBaseVNode("div", {
-            class: normalizeClass(_ctx.$style.logo)
-          }, [
-            createBaseVNode("img", {
-              src: _ctx.logoPath,
-              "data-test-id": "n8n-logo",
-              class: normalizeClass(_ctx.$style.icon),
-              alt: "n8n"
-            }, null, 10, _hoisted_1)
-          ], 2),
-          createVNode(_component_ProjectNavigation, {
-            collapsed: _ctx.isCollapsed,
-            "plan-name": (_a = _ctx.cloudPlanStore.currentPlanData) == null ? void 0 : _a.displayName
-          }, null, 8, ["collapsed", "plan-name"])
-        ];
-      }),
-      beforeLowerMenu: withCtx(() => [
-        _ctx.fullyExpanded && !_ctx.userIsTrialing ? (openBlock(), createBlock(_component_BecomeTemplateCreatorCta, { key: 0 })) : createCommentVNode("", true)
-      ]),
-      menuSuffix: withCtx(() => [
-        createBaseVNode("div", null, [
-          _ctx.hasVersionUpdates ? (openBlock(), createElementBlock("div", {
-            key: 0,
-            "data-test-id": "version-updates-panel-button",
-            class: normalizeClass(_ctx.$style.updates),
-            onClick: _cache[1] || (_cache[1] = (...args) => _ctx.openUpdatesPanel && _ctx.openUpdatesPanel(...args))
-          }, [
-            createBaseVNode("div", {
-              class: normalizeClass(_ctx.$style.giftContainer)
-            }, [
-              createVNode(_component_GiftNotificationIcon)
-            ], 2),
-            createVNode(_component_n8n_text, {
-              class: normalizeClass({ ["ml-xs"]: true, [_ctx.$style.expanded]: _ctx.fullyExpanded }),
-              color: "text-base"
-            }, {
-              default: withCtx(() => [
-                createTextVNode(toDisplayString(_ctx.nextVersions.length > 99 ? "99+" : _ctx.nextVersions.length) + " update" + toDisplayString(_ctx.nextVersions.length > 1 ? "s" : ""), 1)
-              ]),
-              _: 1
-            }, 8, ["class"])
-          ], 2)) : createCommentVNode("", true),
-          createVNode(_component_MainSidebarSourceControl, { "is-collapsed": _ctx.isCollapsed }, null, 8, ["is-collapsed"])
-        ])
-      ]),
-      _: 2
-    }, [
-      _ctx.showUserArea ? {
-        name: "footer",
-        fn: withCtx(() => [
-          createBaseVNode("div", {
-            class: normalizeClass(_ctx.$style.userArea)
-          }, [
-            createBaseVNode("div", _hoisted_2, [
-              createVNode(_component_el_dropdown, {
-                placement: "right-end",
-                trigger: "click",
-                onCommand: _ctx.onUserActionToggle
-              }, createSlots({
-                default: withCtx(() => {
-                  var _a, _b;
-                  return [
-                    createBaseVNode("div", {
-                      class: normalizeClass({ [_ctx.$style.avatar]: true, ["clickable"]: _ctx.isCollapsed })
-                    }, [
-                      createVNode(_component_n8n_avatar, {
-                        "first-name": (_a = _ctx.usersStore.currentUser) == null ? void 0 : _a.firstName,
-                        "last-name": (_b = _ctx.usersStore.currentUser) == null ? void 0 : _b.lastName,
-                        size: "small"
-                      }, null, 8, ["first-name", "last-name"])
-                    ], 2)
-                  ];
-                }),
-                _: 2
-              }, [
-                _ctx.isCollapsed ? {
-                  name: "dropdown",
-                  fn: withCtx(() => [
-                    createVNode(_component_el_dropdown_menu, null, {
-                      default: withCtx(() => [
-                        createVNode(_component_el_dropdown_item, { command: "settings" }, {
-                          default: withCtx(() => [
-                            createTextVNode(toDisplayString(_ctx.$locale.baseText("settings")), 1)
-                          ]),
-                          _: 1
-                        }),
-                        createVNode(_component_el_dropdown_item, { command: "logout" }, {
-                          default: withCtx(() => [
-                            createTextVNode(toDisplayString(_ctx.$locale.baseText("auth.signout")), 1)
-                          ]),
-                          _: 1
-                        })
-                      ]),
-                      _: 1
-                    })
-                  ]),
-                  key: "0"
-                } : void 0
-              ]), 1032, ["onCommand"])
-            ]),
-            createBaseVNode("div", {
-              class: normalizeClass({ ["ml-2xs"]: true, [_ctx.$style.userName]: true, [_ctx.$style.expanded]: _ctx.fullyExpanded })
-            }, [
-              createVNode(_component_n8n_text, {
-                size: "small",
-                bold: true,
-                color: "text-dark"
-              }, {
-                default: withCtx(() => {
-                  var _a;
-                  return [
-                    createTextVNode(toDisplayString((_a = _ctx.usersStore.currentUser) == null ? void 0 : _a.fullName), 1)
-                  ];
-                }),
-                _: 1
-              })
-            ], 2),
-            createBaseVNode("div", {
-              class: normalizeClass({ [_ctx.$style.userActions]: true, [_ctx.$style.expanded]: _ctx.fullyExpanded })
-            }, [
-              createVNode(_component_n8n_action_dropdown, {
-                items: _ctx.userMenuItems,
-                placement: "top-start",
-                "data-test-id": "user-menu",
-                onSelect: _ctx.onUserActionToggle
-              }, null, 8, ["items", "onSelect"])
-            ], 2)
-          ], 2)
-        ]),
-        key: "0"
-      } : void 0
-    ]), 1032, ["items", "collapsed", "onSelect"])
-  ], 2);
-}
 const cssModules = {
   "$style": style0
 };
-const MainSidebar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__cssModules", cssModules]]);
+const MainSidebar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
 export {
   MainSidebar as default
 };