Merge pull request #50213 from SayakMukhopadhyay/sidebar-tree-styling-rework

Rework the stylesheet of sidebar

Author: k8s-ci-robot

assets/js/sidebar-tree.js

@@ -0,0 +1,25 @@
+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) {
+  enableSplitter(screenWidthMediaQuery);
+  screenWidthMediaQuery.addListener(enableSplitter);
+}

assets/scss/_custom.scss

@@ -50,35 +50,6 @@ body {
   }
 }
 
-/* Gutter for sidebar splitter */
-.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;
-}
-
-#sidebarnav,
-#maindoc {
-  max-width: 100%;
-}
-
-#maindoc {
-  overflow-wrap: break-word;
-}
-
-@media (max-width: 768px) {
-  #sidebarnav {
-    padding-left: 15px;
-    padding-right: 15px;
-  }
-
-}
-
 /* Complex table layout support */
 
 .td-content, body.td-content {
@@ -1381,42 +1352,6 @@ body.cid-code-of-conduct main {
     }
 }
 
-// search & sidebar
-.td-sidebar {
-  @media only screen and (min-width: 768px) {
-    padding-top: 1.5rem !important;
-
-    .td-sidebar__inner {
-      top: 8.5rem;
-
-      @media only screen and (min-width: 1075px) {
-        top: 6.5rem;
-      }
-    }
-  }
-}
-
-.td-sidebar-nav {
-  & > .td-sidebar-nav__section {
-    padding-top: .5rem;
-    padding-left: 1.5rem;
-  }
-}
-
-.td-sidebar__inner {
-  form.td-sidebar__search {
-
-    .td-sidebar__toggle {
-      &:hover {
-        color: #000000;
-      }
-
-      color: $primary;
-      margin: 1rem;
-    }
-  }
-}
-
 .no-underline {
   text-decoration: none !important;
 }
@@ -1425,16 +1360,6 @@ body.cid-code-of-conduct main {
   display: none !important;
 }
 
-.td-sidebar-link__page {
-  &#m-docs-search {
-    display: none;
-  }
-
-  &#m-docs-test {
-    display: none;
-  }
-}
-
 //Tutorials
 main.content {
   position: inherit;

assets/scss/_k8s_sidebar-tree.scss

@@ -0,0 +1,75 @@
+.td-sidebar-nav {
+  .td-sidebar-link.tree-root {
+    display: none;
+  }
+
+  #navbarDropdownMenuLink {
+    display: none;
+  }
+}
+
+/* Gutter for sidebar splitter */
+.gutter {
+  background-color: #eee;
+  background-repeat: no-repeat;
+  background-position: 50%;
+
+  &.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;
+}
+
+@include media-breakpoint-down(sm)  {
+  #sidebarnav {
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+}
+
+// search & sidebar
+.td-sidebar {
+  @include media-breakpoint-up(sm){
+    padding-top: 1.5rem !important;
+
+    .td-sidebar__inner {
+      top: 8.5rem;
+
+      @media only screen and (min-width: 1075px) {
+        top: 6.5rem;
+      }
+    }
+  }
+}
+
+.td-sidebar-nav {
+  & > .td-sidebar-nav__section {
+    padding-top: .5rem;
+    padding-left: 1.5rem;
+  }
+}
+
+.td-sidebar__inner form.td-sidebar__search {
+  .td-sidebar__toggle {
+    &:hover {
+      color: #000000;
+    }
+
+    color: $primary;
+  }
+}
+
+.td-sidebar-link__page {
+  &#m-docs-test {
+    display: none;
+  }
+}

assets/scss/_styles_project.scss

@@ -9,6 +9,7 @@ Add styles or import other files. */
 // Base styles
 @import "k8s_community";
 @import "k8s_nav";
+@import "k8s_sidebar-tree";
 
 //Media queries
 @import "base";

layouts/partials/blog-sidebar-tree.html

@@ -22,13 +22,11 @@
   <div id="content-desktop"></div>
   {{ end -}}
   <nav class="collapse td-sidebar-nav{{ if .Site.Params.ui.sidebar_menu_foldable }} foldable-nav{{ end }}" id="td-section-nav">
-    {{/* Re enable below once the disabling is done from CSS
     {{ if  (gt (len .Site.Home.Translations) 0) -}}
     <div class="nav-item dropdown d-block d-lg-none">
       {{ partial "navbar-lang-selector.html" . }}
     </div>
     {{ end -}}
-    */}}
     {{ $navRoot := cond (and (ne .Params.toc_root true) (eq .Site.Home.Type "docs")) .Site.Home .FirstSection -}}
     {{ $ulNr := 0 -}}
     {{ $ulShow := cond (isset .Site.Params.ui "ul_show") .Site.Params.ui.ul_show 1 -}}

layouts/partials/hooks/head-end.html

@@ -108,3 +108,7 @@
 {{- end -}}
 {{ with .Params.js }}{{ range (split . ",") }}<script src="{{ (trim . " ") | relURL }}"></script><!-- custom js added -->
 {{ end }}{{ else }}<!-- no custom js detected -->{{ end }}
+
+<!--for the splitter-->
+<!--script src="https://unpkg.com/split.js/dist/split.min.js"></script-->
+<script src="/js/split-1.6.0.js" integrity="sha384-0blL3GqHy6+9fw0cyY2Aoiwg4onHAtslAs4OkqZY7UQBrR65/K4gI+hxLdWDrjpz"></script>

layouts/partials/scripts.html

@@ -31,14 +31,15 @@
 {{ $jsBase := resources.Get "js/base.js" }}
 {{ $jsAnchor := resources.Get "js/anchor.js" }}
 {{ $jsNav := resources.Get "js/nav.js" | resources.ExecuteAsTemplate "js/nav.js" .Site.Params }}
+{{ $jsSidebarTree := resources.Get "js/sidebar-tree.js" | resources.ExecuteAsTemplate "js/sidebar-tree.js" .Site.Params }}
 {{ $jsSearch := resources.Get "js/search.js" | resources.ExecuteAsTemplate "js/search.js" .Site.Home }}
 {{ if .Site.Params.offlineSearch }}
 {{ $jsSearch = resources.Get "js/offline-search.js" }}
 {{/* Revisit this if / when either of https://github.com/google/docsy/issues/2194 and https://github.com/google/docsy/pull/1512 are closed */}}
 {{ else if .Site.Params.customSearch }}
 {{ $jsSearch = resources.Get "js/custom-search.js" }}
 {{ end }}
-{{ $js := (slice $jsBs $jsBase $jsAnchor $jsNav $jsSearch) | resources.Concat "js/main.js" -}}
+{{ $js := (slice $jsBs $jsBase $jsAnchor $jsNav $jsSidebarTree $jsSearch) | resources.Concat "js/main.js" -}}
 {{ if hugo.IsProduction -}}
   {{ $js := $js | minify | fingerprint -}}
   <script src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous"></script>
@@ -58,35 +59,4 @@
     crossorigin="anonymous"></script>
 {{ end -}}
 
-<!--for the splitter-->
-<!--script src="https://unpkg.com/split.js/dist/split.min.js"></script-->
-<script src="/js/split-1.6.0.js" integrity="sha384-0blL3GqHy6+9fw0cyY2Aoiwg4onHAtslAs4OkqZY7UQBrR65/K4gI+hxLdWDrjpz"></script>
-<script>
-  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) {
-    enableSplitter(screenWidthMediaQuery);
-    screenWidthMediaQuery.addListener(enableSplitter);
-  }
-</script>
-
 {{ partial "hooks/body-end.html" . }}