From 459471a6239721932222d970b68408e8ba12b87a Mon Sep 17 00:00:00 2001 From: Camila Belo Date: Fri, 13 May 2022 13:37:18 +0200 Subject: [PATCH] fix(techdocs): sidebars position update Signed-off-by: Camila Belo --- .../components/TechDocsReaderPageContent/dom.tsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/dom.tsx b/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/dom.tsx index 92bfbb2e14..07bb481107 100644 --- a/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/dom.tsx +++ b/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/dom.tsx @@ -95,6 +95,8 @@ export const useTechDocsReaderDom = ( } else { sidebar.style.top = `${newTop}px`; } + // Show the sidebar only after updating its position + sidebar.style.removeProperty('opacity'); }); }, [dom, sidebars]); @@ -725,6 +727,13 @@ export const useTechDocsReaderDom = ( docStorageUrl: await techdocsStorageApi.getApiOrigin(), onLoading: (renderedElement: Element) => { (renderedElement as HTMLElement).style.setProperty('opacity', '0'); + const renderedSidebars = Array.from( + renderedElement.querySelectorAll('.md-sidebar'), + ); + // Hide sidebars until your position is updated + for (const sidebar of renderedSidebars) { + sidebar.style.setProperty('opacity', '0'); + } }, onLoaded: (renderedElement: Element) => { (renderedElement as HTMLElement).style.removeProperty('opacity'); @@ -732,9 +741,11 @@ export const useTechDocsReaderDom = ( renderedElement .querySelector('.md-nav__title') ?.removeAttribute('for'); - setSidebars( - Array.from(renderedElement.querySelectorAll('.md-sidebar')), + const renderedSidebars = Array.from( + renderedElement.querySelectorAll('.md-sidebar'), ); + // Wait for styles to be calculated to update sidebar position + setSidebars(renderedSidebars); }, }), ]),