From 3139f83af5bcfe21f0c6259ac73d80ab728b2a69 Mon Sep 17 00:00:00 2001
From: "Chongyang Adrian, Ke" <ftt.adrian.ke@grabtaxi.com>
Date: Wed, 24 Mar 2021 14:57:51 +0800
Subject: [PATCH] improve small-screen rendering

Signed-off-by: Chongyang Adrian, Ke <ftt.adrian.ke@grabtaxi.com>
---
 ...ry.md => techdocs-nervous-plants-carry.md} |  0
 .../techdocs/src/reader/components/Reader.tsx | 34 +++++++++++++++++--
 2 files changed, 32 insertions(+), 2 deletions(-)
 rename .changeset/{nervous-plants-carry.md => techdocs-nervous-plants-carry.md} (100%)

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'),
           );