mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-02-02 07:01:30 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(editor): Persist sidebar collapsed status preference (#12505)

Browse source
This commit is contained in:
Alex Grozav 2025-01-08 17:42:17 +02:00 committed by GitHub
parent 2775f617ae
commit dba7d46f3e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 21 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
packages/editor-ui/src/components/MainSidebar.vue
View file

@ -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);
};
function onResize() {
void callDebounced(onResizeEnd, { debounceTime: 250 });
}
const onResizeEnd = async (event: UIEvent) => {
const browserWidth = (event.target as Window).outerWidth;
await checkWidthAndAdjustSidebar(browserWidth);
};
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,

9
packages/editor-ui/src/stores/ui.store.ts
View file

@ -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<string[]>([]);
const sidebarMenuCollapsed = ref<boolean>(true);
const sidebarMenuCollapsedPreference = useLocalStorage<boolean>('sidebar.collapsed', false);
const sidebarMenuCollapsed = ref<boolean>(sidebarMenuCollapsedPreference.value);
const currentView = ref<string>('');
const draggable = ref<Draggable>({
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,