diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue index 35f2d71f41120..e5fb044a80d43 100644 --- a/packages/editor-ui/src/components/MainSidebar.vue +++ b/packages/editor-ui/src/components/MainSidebar.vue @@ -185,12 +185,9 @@ onMounted(async () => { }); } - await nextTick(() => { - uiStore.sidebarMenuCollapsed = window.innerWidth < 900; - fullyExpanded.value = !isCollapsed.value; - }); - becomeTemplateCreatorStore.startMonitoringCta(); + + await nextTick(onResizeEnd); }); onBeforeUnmount(() => { @@ -273,22 +270,21 @@ const handleSelect = (key: string) => { } }; -const onResize = (event: UIEvent) => { - void callDebounced(onResizeEnd, { debounceTime: 100 }, event); -}; - -const onResizeEnd = async (event: UIEvent) => { - const browserWidth = (event.target as Window).outerWidth; - await checkWidthAndAdjustSidebar(browserWidth); -}; +function onResize() { + void callDebounced(onResizeEnd, { debounceTime: 250 }); +} -const checkWidthAndAdjustSidebar = async (width: number) => { - if (width < 900) { +async function onResizeEnd() { + if (window.outerWidth < 900) { uiStore.sidebarMenuCollapsed = true; - await nextTick(); - fullyExpanded.value = !isCollapsed.value; + } else { + uiStore.sidebarMenuCollapsed = uiStore.sidebarMenuCollapsedPreference; } -}; + + void nextTick(() => { + fullyExpanded.value = !isCollapsed.value; + }); +} const { menu, diff --git a/packages/editor-ui/src/stores/ui.store.ts b/packages/editor-ui/src/stores/ui.store.ts index dfab03f8f3467..21928cfe39a0c 100644 --- a/packages/editor-ui/src/stores/ui.store.ts +++ b/packages/editor-ui/src/stores/ui.store.ts @@ -65,6 +65,7 @@ import { } from './ui.utils'; import { computed, ref } from 'vue'; import type { Connection } from '@vue-flow/core'; +import { useLocalStorage } from '@vueuse/core'; let savedTheme: ThemeOption = 'system'; @@ -151,7 +152,8 @@ export const useUIStore = defineStore(STORES.UI, () => { }); const modalStack = ref([]); - const sidebarMenuCollapsed = ref(true); + const sidebarMenuCollapsedPreference = useLocalStorage('sidebar.collapsed', false); + const sidebarMenuCollapsed = ref(sidebarMenuCollapsedPreference.value); const currentView = ref(''); const draggable = ref({ isDragging: false, @@ -502,7 +504,9 @@ export const useUIStore = defineStore(STORES.UI, () => { }; const toggleSidebarMenuCollapse = () => { - sidebarMenuCollapsed.value = !sidebarMenuCollapsed.value; + const newCollapsedState = !sidebarMenuCollapsed.value; + sidebarMenuCollapsedPreference.value = newCollapsedState; + sidebarMenuCollapsed.value = newCollapsedState; }; const getCurlToJson = async (curlCommand: string) => { @@ -592,6 +596,7 @@ export const useUIStore = defineStore(STORES.UI, () => { nodeViewInitialized, addFirstStepOnLoad, sidebarMenuCollapsed, + sidebarMenuCollapsedPreference, bannerStack, theme, modalsById,