Fix sticky sidebar responsiveness on small screens (#5039)

doc/_static/style.css

@@ -10,11 +10,254 @@ table.docutils td {
 /* Reduce left and right margins */
 
 .container, .container-lg, .container-md, .container-sm, .container-xl {
-  max-width: 1600px !important;
+  max-width: 1350px !important;
 }
 
-/* Make sidebar sticky */
+
+/* Copied from
+https://github.com/bokeh/bokeh/blob/branch-2.4/sphinx/source/bokeh/static/custom.css
+*/
+
+:root {
+  /* Logo image height + all the paddings/margins make the navbar height. */
+  --navbar-height: calc(30px + 0.3125rem * 2 + 0.5rem * 2);
+}
+
+.bd-search {
+  position: relative;
+  padding-bottom: 20px;
+}
+
+@media (min-width: 768px) {
+  .search-front-page {
+    width: 50%;
+  }
+}
+
+/* minimal copy paste from bootstrap docs css to get sidebars working */
+
+.bd-toc {
+  -ms-flex-order: 2;
+  order: 2;
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+  /* font-size: 0.875rem; */
+  /* add scrolling sidebar */
+  height: calc(100vh - 2rem);
+  overflow-y: auto;
+}
+
+@supports ((position: -webkit-sticky) or (position: sticky)) {
+  .bd-toc {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 4rem;
+    height: calc(100vh - 4rem);
+    overflow-y: auto;
+  }
+}
+
+.section-nav {
+  padding-left: 0;
+  border-left: 1px solid #eee;
+  border-bottom: none;
+}
+
+.section-nav ul {
+  padding-left: 1rem;
+}
+
+.toc-entry {
+  display: block;
+}
+
+.toc-entry a {
+  display: block;
+  padding: 0.125rem 1.5rem;
+  color: #77757a;
+}
+
+.toc-entry a:hover {
+  color: rgba(0, 0, 0, 0.85);
+  text-decoration: none;
+}
 
 .bd-sidebar {
-  position: sticky !important;
+  -ms-flex-order: 0;
+  order: 0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+@media (min-width: 768px) {
+  .bd-sidebar {
+    border-right: 1px solid rgba(0, 0, 0, 0.1);
+  }
+  @supports ((position: -webkit-sticky) or (position: sticky)) {
+    .bd-sidebar {
+      position: -webkit-sticky;
+      position: sticky;
+      top: var(--navbar-height);
+      z-index: 1000;
+      height: calc(100vh - var(--navbar-height));
+    }
+  }
+}
+
+@media (min-width: 1200px) {
+  .bd-sidebar {
+    -ms-flex: 0 1 320px;
+    flex: 0 1 320px;
+  }
+}
+
+.bd-links {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  margin-right: -15px;
+  margin-left: -15px;
+}
+
+@media (min-width: 768px) {
+  @supports ((position: -webkit-sticky) or (position: sticky)) {
+    .bd-links {
+      max-height: calc(100vh - 9rem);
+      overflow-y: auto;
+    }
+  }
+}
+
+@media (min-width: 768px) {
+  .bd-links {
+    display: block !important;
+  }
+}
+
+.bd-sidenav {
+  display: none;
+}
+
+.bd-toc-link {
+  display: block;
+  padding: 0.25rem 1.5rem;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.65);
+}
+
+.bd-toc-link:hover {
+  color: rgba(0, 0, 0, 0.85);
+  text-decoration: none;
+}
+
+.bd-toc-item.active {
+  margin-bottom: 1rem;
+}
+
+.bd-toc-item.active:not(:first-child) {
+  margin-top: 1rem;
+}
+
+.bd-toc-item.active > .bd-toc-link {
+  color: rgba(0, 0, 0, 0.85);
+}
+
+.bd-toc-item.active > .bd-toc-link:hover {
+  background-color: transparent;
+}
+
+.bd-toc-item.active > .bd-sidenav {
+  display: block;
+}
+
+.bd-sidebar .nav > li > a {
+  display: block;
+  padding: 0.25rem 1.5rem;
+  font-size: 90%;
+  color: rgba(0, 0, 0, 0.65);
+}
+
+.bd-sidebar .nav > li > a:hover {
+  color: rgba(0, 0, 0, 0.85);
+  text-decoration: none;
+  background-color: transparent;
+}
+
+.bd-sidebar .nav > .active > a,
+.bd-sidebar .nav > .active:hover > a {
+  font-weight: 400;
+  color: #130654;
+  /* adjusted from original
+  color: rgba(0, 0, 0, 0.85);
+  background-color: transparent; */
+}
+
+.bd-sidebar .nav > li > ul {
+  list-style: none;
+  padding: 0.25rem 1.5rem;
+}
+
+.bd-sidebar .nav > li > ul > li > a {
+  display: block;
+  padding: 0.25rem 1.5rem;
+  font-size: 90%;
+  color: rgba(0, 0, 0, 0.65);
+}
+
+.bd-sidebar .nav > li > ul > .active > a,
+.bd-sidebar .nav > li > ul > .active:hover > a {
+  font-weight: 400;
+  color: #542437;
+}
+
+dt:target {
+  background-color: initial;
+}
+
+/* Offsetting anchored elements within the main content to adjust for fixed header
+ https://github.com/pandas-dev/pandas-sphinx-theme/issues/6 */
+main *:target::before {
+  display: block;
+  content: '';
+  height: var(--navbar-height);
+  margin-top: calc(-1 * var(--navbar-height));
+}
+
+body {
+  /* Add padding to body to avoid overlap with navbar. */
+  padding-top: var(--navbar-height);
+  width: 100%;
+}
+
+/* adjust toc font sizes to improve overview */
+.toc-h2 {
+  font-size: 0.85rem;
+}
+
+.toc-h3 {
+  font-size: 0.75rem;
+}
+
+.toc-h4 {
+  font-size: 0.65rem;
+}
+
+.toc-entry > .nav-link.active {
+  font-weight: 400;
+  color: #542437;
+  background-color: transparent;
+  border-left: 2px solid #563d7c;
+}
+
+.nav-link:hover {
+  border-style: none;
+}
+
+/* Collapsing of the TOC sidebar while scrolling */
+
+/* Nav: hide second level (shown on .active) */
+.bd-toc .nav .nav {
+  display: none;
+}
+
+.bd-toc .nav > .active > ul {
+  display: block;
 }