Split the doc view

This PR adds a splitter so that the navigation panel can be resized.

Author: tengqm

layouts/docs/baseof.html

@@ -16,18 +16,21 @@
     </header>
     <div class="container-fluid td-outer">
       <div class="td-main">
-        <div class="row flex-md-nowrap">
-          <div class="col-12 col-md-3 col-xl-2 td-sidebar d-print-none">
+        <div class="row flex">
+          <div id="sidebarnav" class="split td-sidebar d-print-none">
             {{ partial "sidebar.html" . }}
           </div>
-          <main class="col-12 col-md-9 col-xl-8 pl-md-5" role="main">
-            {{ if not .Site.Params.ui.breadcrumb_disable }}{{ partial "breadcrumb.html" . }}{{ end }}
-            {{ block "deprecated" . }}
-              {{ partial "deprecation-warning.html" . }}
-            {{ end }}
-            {{ block "outdated_content" . }}
-              {{ partial "docs/outdated_content.html" . }}
-            {{ end }}
+          <div id="maindoc" class="split pl-md-5 row">
+          <!--main class="col-12 col-md-9 col-xl-8 pl-md-5" role="main"-->
+            <main role="main" class="col-xl-8">
+              {{ if not .Site.Params.ui.breadcrumb_disable }}{{ partial "breadcrumb.html" . }}{{ end }}
+              {{ block "deprecated" . }}
+                {{ partial "deprecation-warning.html" . }}
+              {{ end }}
+              {{ block "outdated_content" . }}
+                {{ partial "docs/outdated_content.html" . }}
+              {{ end }}
+
               {{ block "main" . }}{{ end }}
               {{- if .HasShortcode "thirdparty-content" -}}
                 {{ block "thirdparty-disclaimer" . }}
@@ -39,18 +42,19 @@
                   {{ partial "docs/auto-generated-pageinfo.html" . }}
                 {{- end -}}
               {{- end -}}
-            {{ if (and (not .Params.hide_feedback) (.Site.Params.ui.feedback.enable) (.Site.GoogleAnalytics)) }}
-              {{ partial "feedback.html" .Site.Params.ui.feedback }}
-            {{ end }}
-            {{ partial "page-meta-lastmod.html" . }}
-            {{ if (.Site.DisqusShortname) }}
-              <br />
-              {{ partial "disqus-comment.html" . }}
-            {{ end }}
-          </main>
-          <div class="d-none d-xl-block col-xl-2 td-toc d-print-none">
-            {{ partial "toc.html" . }}
-          </div>
+              {{ if (and (not .Params.hide_feedback) (.Site.Params.ui.feedback.enable) (.Site.GoogleAnalytics)) }}
+                {{ partial "feedback.html" .Site.Params.ui.feedback }}
+              {{ end }}
+              {{ partial "page-meta-lastmod.html" . }}
+              {{ if (.Site.DisqusShortname) }}
+                <br />
+                {{ partial "disqus-comment.html" . }}
+              {{ end }}
+            </main>
+            <div class="d-none d-xl-block td-toc d-print-none">
+              {{ partial "toc.html" . }}
+            </div>
+          </div> <!--end of main-content-->
         </div>
       </div>
     </div>

layouts/partials/css.html

@@ -2,6 +2,21 @@
 
 {{ $inServerMode := site.IsServer }}
 
+<!--begin splitter-->
+<style>
+.gutter {
+    background-color: #eee;
+    background-repeat: no-repeat;
+    background-position: 50%;
+}
+
+.gutter.gutter-horizontal {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
+    cursor: col-resize;
+}
+</style>
+<!--end splitter-->
+
 {{- if .Params.case_study_styles }}
   {{ $cssOutput := "css/case-studies.css" }}
   {{ $caseStudiesCSS := resources.Get "scss/_case-studies.scss" | resources.ToCSS }}

layouts/partials/head.html

@@ -80,6 +80,8 @@
 {{ end }}
 
 <script src="/js/jquery-3.6.0.min.js" intregrity="sha384-vtXRMe3mGCbOeY7l30aIg8H9p3GdeSe4IFlP6G8JMa7o7lXvnz3GFKzPxzJdPfGK" crossorigin="anonymous"></script>
+<!--script src="https://unpkg.com/split.js/dist/split.min.js"></script-->
+<script src="/js/split-1.6.0.js" intregrity="sha384-0blL3GqHy6+9fw0cyY2Aoiwg4onHAtslAs4OkqZY7UQBrR65/K4gI+hxLdWDrjpz"></script>
 
 {{- if eq (lower .Params.cid) "community" -}}
 {{- if eq .Params.community_styles_migrated true -}}

layouts/partials/scripts.html

@@ -22,4 +22,16 @@
 <!-- scripts for prism -->
 <script src='/js/prism.js'></script>
 {{ end }}
+
+<!--for the splitter-->
+<script>
+  eleNav = document.getElementById("sidebarnav");
+  if (eleNav !== null) {
+    Split(["#sidebarnav", "#maindoc"], {
+        sizes: [20, 80],
+        minSize: 100,
+    });
+  }
+</script>
+
 {{ partial "hooks/body-end.html" . }}