Update left nav splitter for Docsy 0.7

Author: lmktfy

assets/scss/_custom.scss

@@ -1972,6 +1972,11 @@ body.td-search {
   color: #ffffff !important;
 }
 
+// Avoid having padding left of sidebar
+body .container-fluid.td-outer:has(> .td-main #nav-sidebar) {
+  padding-left: 0;
+}
+
 body.td-home section.case-studies {
    h2, h3 {
      text-align: center;

assets/scss/_k8s_sidebar-tree.scss

@@ -13,10 +13,28 @@
   background-color: #eee;
   background-repeat: no-repeat;
   background-position: 50%;
+  flex-grow: 0;
+  padding: 0;
+}
 
   &.gutter-horizontal {
     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: 2.25rem;
+    padding-right: 2.25rem;
   }
 }
 

hugo.toml

@@ -213,6 +213,8 @@ url = "https://v1-30.docs.kubernetes.io"
 
 # User interface configuration
 [params.ui]
+# Allow resizing the sidebar gutter
+sidebar_resizable = true
 # Enable to show the side bar menu in its compact state.
 sidebar_menu_compact = false
 # Show this many levels in compact mode

layouts/docs/baseof.html

@@ -14,8 +14,8 @@
     </header>
     <div class="container-fluid td-outer">
       <div class="td-main">
-        <div class="row flex-column flex-md-row">
-          <div id="sidebarnav" class="split td-sidebar d-print-none">
+        <div class="row flex-xl-nowrap">
+          <div id="nav-sidebar" class="col-12 col-md-3 col-xl-2 td-sidebar d-print-none{{ if .Site.Params.ui.sidebar_resizable }} split{{ end }}">
             {{ partial "sidebar.html" . }}
           </div>
           <div id="maindoc" class="split pl-md-5 row">

layouts/partials/hooks/body-end.html

@@ -10,9 +10,10 @@
   function enableSplitter(mediaQuery) {
     if (mediaQuery.matches) {
       if (!splitInstance) {
-        splitInstance = Split(["#sidebarnav", "#maindoc"], {
+        splitInstance = Split(["#nav-sidebar", ".docs-main-content"], {
           sizes: [20, 80],
           minSize: 100,
+          gutterSize: 8 // pixels
         });
       }
     } else {
@@ -25,7 +26,7 @@
 
   const screenWidthMediaQuery = window.matchMedia("(min-width: 768px)");
 
-  const eleNav = document.getElementById("sidebarnav");
+  const eleNav = document.getElementById("nav-sidebar");
   if (eleNav !== null) {
     enableSplitter(screenWidthMediaQuery);
     screenWidthMediaQuery.addListener(enableSplitter);