- //panel size will not scale automatically on window resize, so we do it manually
- window.addEventListener("resize", () => applyCollapsedState(props.sidePanelIsCollapsed));
- applyCollapsedState(props.sidePanelIsCollapsed);
+const { classes, sidePanelIsCollapsed, isNotLinking, isTransitioning, isUserActive, sessionIdleTimeout, currentSideWidth } = props
+
+ const applyCollapsedState = (savedWidthInPx) => {
+ const rightPanel: Element = document.getElementsByClassName("layout-pane")[1];
+ const totalWidth: number = document.getElementsByClassName("splitter-layout")[0]?.clientWidth;
+ const savedWidthInPercent = (savedWidthInPx / totalWidth) * 100
+ const rightPanelExpandedWidth = (totalWidth - COLLAPSE_ICON_SIZE) / (totalWidth / 100);
+
+ if(isTransitioning && !!rightPanel) {
+ rightPanel.setAttribute('style', `width: ${sidePanelIsCollapsed ? `calc(${savedWidthInPercent}% - 1rem)` : `${getSplitterInitialSize()}%`};`)
+ }
+
+ if (rightPanel) {
+ rightPanel.setAttribute("style", `width: ${sidePanelIsCollapsed ? `calc(${rightPanelExpandedWidth}% - 1rem)` : `${getSplitterInitialSize()}%`};`);
+ }
+ const splitter = document.getElementsByClassName("layout-splitter")[0];
+ sidePanelIsCollapsed ? splitter?.classList.add("layout-splitter-disabled") : splitter?.classList.remove("layout-splitter-disabled");
+ };
+
+ const [savedWidth, setSavedWidth] = useState<number>(0)
+
+ useEffect(()=>{
+ if (isTransitioning) setSavedWidth(currentSideWidth)
+ }, [isTransitioning, currentSideWidth])
+
+ useEffect(()=>{
+ if (isTransitioning) applyCollapsedState(savedWidth);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [isTransitioning, savedWidth])
+
+ applyCollapsedState(savedWidth);