diff --git a/.changeset/nervous-plants-carry.md b/.changeset/techdocs-nervous-plants-carry.md similarity index 100% rename from .changeset/nervous-plants-carry.md rename to .changeset/techdocs-nervous-plants-carry.md diff --git a/plugins/techdocs/src/reader/components/Reader.tsx b/plugins/techdocs/src/reader/components/Reader.tsx index 4f3a52a522..dc76aa3fdd 100644 --- a/plugins/techdocs/src/reader/components/Reader.tsx +++ b/plugins/techdocs/src/reader/components/Reader.tsx @@ -67,9 +67,11 @@ export const Reader = ({ entityId, onReady }: Props) => { } }; updateSidebarPosition(); - document.addEventListener('scroll', updateSidebarPosition); + window.addEventListener('scroll', updateSidebarPosition); + window.addEventListener('resize', updateSidebarPosition); return () => { - document.removeEventListener('scroll', updateSidebarPosition); + window.removeEventListener('scroll', updateSidebarPosition); + window.removeEventListener('resize', updateSidebarPosition); }; }, [shadowDomRef, shadowRoot, sidebars]); @@ -111,6 +113,30 @@ export const Reader = ({ entityId, onReady }: Props) => { .md-typeset { font-size: 1rem; } .md-nav { font-size: 1rem; } .md-grid { max-width: 90vw; margin: 0 } + @media screen and (max-width: 76.1875em) { + .md-nav { + background-color: ${theme.palette.background.default}; + transition: none !important + } + .md-sidebar--secondary { display: none; } + .md-sidebar--primary { left: 72px; width: 10rem } + .md-content { margin-left: 10rem; max-width: 100%; } + .md-content__inner { font-size: 0.9rem } + .md-footer { + position: static; + margin-left: 10rem; + width: calc(100% - 10rem); + } + .md-nav--primary .md-nav__title { + white-space: normal; + height: auto; + line-height: 1rem; + cursor: auto; + } + .md-nav--primary > .md-nav__title [for="none"] { + padding-top: 0; + } + } `, }), ]); @@ -160,6 +186,10 @@ export const Reader = ({ entityId, onReady }: Props) => { }, onLoaded: (dom: Element) => { (dom as HTMLElement).style.removeProperty('opacity'); + // disable MkDocs drawer toggling ('for' attribute => checkbox mechanism) + (dom as HTMLElement) + .querySelector('.md-nav__title') + ?.removeAttribute('for'); const sideDivs: HTMLElement[] = Array.from( shadowRoot!.querySelectorAll('.md-sidebar'), );