diff --git a/app/components/Layout.js b/app/components/Layout.js index 6a2c5957b..8db6aeb7d 100644 --- a/app/components/Layout.js +++ b/app/components/Layout.js @@ -141,6 +141,7 @@ class Layout extends React.Component { - props.$sidebarCollapsed ? `margin-left 100ms ease-out` : "none"}; + props.$isResizing ? "none" : `margin-left 100ms ease-out`}; @media print { margin: 0; diff --git a/app/components/Sidebar/Sidebar.js b/app/components/Sidebar/Sidebar.js index b3cd91b6d..79e4d3d03 100644 --- a/app/components/Sidebar/Sidebar.js +++ b/app/components/Sidebar/Sidebar.js @@ -111,6 +111,10 @@ function Sidebar({ location, children }: Props) { ui.setSidebarWidth(theme.sidebarWidth); }, [ui, theme.sidebarWidth]); + React.useEffect(() => { + ui.setSidebarResizing(isResizing); + }, [ui, isResizing]); + React.useEffect(() => { if (location !== previousLocation) { ui.hideMobileSidebar(); diff --git a/app/stores/UiStore.js b/app/stores/UiStore.js index d5c702e26..859022af0 100644 --- a/app/stores/UiStore.js +++ b/app/stores/UiStore.js @@ -26,6 +26,7 @@ class UiStore { @observable mobileSidebarVisible: boolean = false; @observable sidebarWidth: number; @observable sidebarCollapsed: boolean = false; + @observable sidebarIsResizing: boolean = false; @observable toasts: Map = new Map(); lastToastId: string; @@ -97,6 +98,11 @@ class UiStore { } }; + @action + setSidebarResizing = (sidebarIsResizing: boolean): void => { + this.sidebarIsResizing = sidebarIsResizing; + }; + @action setActiveCollection = (collection: Collection): void => { this.activeCollectionId = collection.id;