mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -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(); becomeTemplateCreatorStore.startMonitoringCta();
await nextTick(onResizeEnd);
}); });
onBeforeUnmount(() => { onBeforeUnmount(() => {
@ -273,22 +270,21 @@ const handleSelect = (key: string) => {
} }
}; };
const onResize = (event: UIEvent) => { function onResize() {
void callDebounced(onResizeEnd, { debounceTime: 100 }, event); void callDebounced(onResizeEnd, { debounceTime: 250 });
}; }
const onResizeEnd = async (event: UIEvent) => { async function onResizeEnd() {
const browserWidth = (event.target as Window).outerWidth; if (window.outerWidth < 900) {
await checkWidthAndAdjustSidebar(browserWidth);
};
const checkWidthAndAdjustSidebar = async (width: number) => {
if (width < 900) {
uiStore.sidebarMenuCollapsed = true; uiStore.sidebarMenuCollapsed = true;
await nextTick(); } else {
fullyExpanded.value = !isCollapsed.value; uiStore.sidebarMenuCollapsed = uiStore.sidebarMenuCollapsedPreference;
} }
};
void nextTick(() => {
fullyExpanded.value = !isCollapsed.value;
});
}
const { const {
menu, menu,

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

@ -65,6 +65,7 @@ import {
} from './ui.utils'; } from './ui.utils';
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
import type { Connection } from '@vue-flow/core'; import type { Connection } from '@vue-flow/core';
import { useLocalStorage } from '@vueuse/core';
let savedTheme: ThemeOption = 'system'; let savedTheme: ThemeOption = 'system';
@ -151,7 +152,8 @@ export const useUIStore = defineStore(STORES.UI, () => {
}); });
const modalStack = ref<string[]>([]); 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 currentView = ref<string>('');
const draggable = ref<Draggable>({ const draggable = ref<Draggable>({
isDragging: false, isDragging: false,
@ -502,7 +504,9 @@ export const useUIStore = defineStore(STORES.UI, () => {
}; };
const toggleSidebarMenuCollapse = () => { const toggleSidebarMenuCollapse = () => {
sidebarMenuCollapsed.value = !sidebarMenuCollapsed.value; const newCollapsedState = !sidebarMenuCollapsed.value;
sidebarMenuCollapsedPreference.value = newCollapsedState;
sidebarMenuCollapsed.value = newCollapsedState;
}; };
const getCurlToJson = async (curlCommand: string) => { const getCurlToJson = async (curlCommand: string) => {
@ -592,6 +596,7 @@ export const useUIStore = defineStore(STORES.UI, () => {
nodeViewInitialized, nodeViewInitialized,
addFirstStepOnLoad, addFirstStepOnLoad,
sidebarMenuCollapsed, sidebarMenuCollapsed,
sidebarMenuCollapsedPreference,
bannerStack, bannerStack,
theme, theme,
modalsById, modalsById,