Fix docs mobile layout (#42943)

* fix docs mobile layout

* Update js to disable splitter on mobile

* fix mobile and desktop layout

Author: priyanshuchaudhary53

layouts/docs/baseof.html

@@ -16,7 +16,7 @@
     </header>
     <div class="container-fluid td-outer">
       <div class="td-main">
-        <div class="row flex">
+        <div class="row flex-column flex-md-row">
           <div id="sidebarnav" class="split td-sidebar d-print-none">
             {{ partial "sidebar.html" . }}
           </div>
@@ -51,7 +51,7 @@
                 {{ partial "disqus-comment.html" . }}
               {{ end }}
             </main>
-            <div class="d-none d-xl-block td-toc d-print-none">
+            <div class="d-none d-xl-block td-toc d-print-none col-xl-4">
               {{ partial "toc.html" . }}
             </div>
           </div> <!--end of main-content-->

layouts/partials/css.html

@@ -14,6 +14,23 @@
     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
     cursor: col-resize;
 }
+
+#sidebarnav,
+#maindoc {
+  max-width: 100%;
+}
+
+#maindoc {
+  overflow-wrap: break-word;
+}
+
+@media (max-width: 768px) {
+  #sidebarnav {
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+
+}
 </style>
 <!--end splitter-->
 

layouts/partials/scripts.html

@@ -25,13 +25,32 @@
 
 <!--for the splitter-->
 <script>
-  eleNav = document.getElementById("sidebarnav");
+  let splitInstance = null;
+
+  function enableSplitter(mediaQuery) {
+    if (mediaQuery.matches) {
+      if (!splitInstance) {
+        splitInstance = Split(["#sidebarnav", "#maindoc"], {
+          sizes: [20, 80],
+          minSize: 100,
+        });
+      }
+    } else {
+      if (splitInstance) {
+        splitInstance.destroy();
+        splitInstance = null;
+      }
+    }
+  }
+
+  const screenWidthMediaQuery = window.matchMedia("(min-width: 768px)");
+
+  const eleNav = document.getElementById("sidebarnav");
   if (eleNav !== null) {
-    Split(["#sidebarnav", "#maindoc"], {
-        sizes: [20, 80],
-        minSize: 100,
-    });
+    enableSplitter(screenWidthMediaQuery);
+    screenWidthMediaQuery.addListener(enableSplitter);
   }
 </script>
 
+
 {{ partial "hooks/body-end.html" . }}