Fixing up header and sidebar javascript

Author: choldgraf

docs/demo/index.rst

@@ -10,7 +10,6 @@ See the sections to the left and below to explore.
     :caption: Real-world examples
 
     gallery
-    pydata
     example_pandas
 
 

src/pydata_sphinx_theme/assets/scripts/index.js

@@ -84,10 +84,9 @@ function addModeListener() {
   setTheme(document.documentElement.dataset.mode);
 
   // Attach event handlers for toggling themes colors
-  const btn = document.getElementById("theme-switch");
-  if (btn != null) {
-    btn.addEventListener("click", cycleMode);
-  }
+  document.querySelectorAll(".theme-switch-button").forEach((el) => {
+    el.addEventListener("click", cycleMode);
+  });
 }
 
 /*******************************************************************************

src/pydata_sphinx_theme/assets/styles/components/_navbar-links.scss

@@ -2,21 +2,66 @@
  * Navigation links within a navbar
  */
 .navbar-nav {
-  // Navigation links
-  li a.nav-link {
-    color: var(--pst-color-text-muted);
+  ul {
+    display: block;
+    list-style: none;
 
-    &:hover {
-      color: var(--pst-color-primary);
+    // Reduce padding of nested `ul` items a bit
+    ul {
+      padding: 0 0 0 1rem;
     }
+  }
+
+  // Default link styles
+  li {
+    display: flex;
+    flex-direction: column;
+
+    a {
+      color: var(--pst-color-text-muted);
+      padding-top: 0.25rem;
+      padding-bottom: 0.25rem;
+      &:hover {
+        color: var(--pst-color-primary);
+        border-style: none;
+        text-decoration-line: none;
+      }
 
-    &:focus {
+      &:focus {
+        color: var(--pst-color-primary);
+      }
+    }
+
+    // Active page is always highlighted
+    &.current a {
+      font-weight: 600;
       color: var(--pst-color-primary);
     }
   }
 
-  > .active > .nav-link {
-    font-weight: 600;
-    color: var(--pst-color-primary);
+  /**
+   * Togglable expand/collapse
+   * This is only applicable to the primary sidebar which has these checkboxes
+   */
+  .toctree-checkbox {
+    position: absolute;
+    display: none;
+  }
+
+  .toctree-checkbox {
+    ~ ul {
+      display: none;
+    }
+    ~ label i {
+      transform: rotate(0deg);
+    }
+  }
+  .toctree-checkbox:checked {
+    ~ ul {
+      display: block;
+    }
+    ~ label i {
+      transform: rotate(180deg);
+    }
   }
 }

src/pydata_sphinx_theme/assets/styles/components/_switcher-theme.scss

@@ -1,5 +1,5 @@
 // the icons for theme change
-#theme-switch {
+.theme-switch-button {
   // to overide bootstrap settings
   border-color: var(--pst-color-on-background);
   padding: 0.25rem 0.5rem;
@@ -20,12 +20,12 @@
   }
 }
 
-html[data-mode="auto"] #theme-switch a[data-mode="auto"] {
+html[data-mode="auto"] .theme-switch-button a[data-mode="auto"] {
   display: block;
 }
-html[data-mode="light"] #theme-switch a[data-mode="light"] {
+html[data-mode="light"] .theme-switch-button a[data-mode="light"] {
   display: block;
 }
-html[data-mode="dark"] #theme-switch a[data-mode="dark"] {
+html[data-mode="dark"] .theme-switch-button a[data-mode="dark"] {
   display: block;
 }

src/pydata_sphinx_theme/assets/styles/index.scss

@@ -47,6 +47,7 @@ $grid-breakpoints: (
 // Re-usable components across the theme
 @import "./components/icon-links";
 @import "./components/header/header-logo";
+@import "./components/navbar-links";
 @import "./components/prev-next";
 @import "./components/search";
 @import "./components/switcher-theme";

src/pydata_sphinx_theme/assets/styles/sections/_header-article.scss

@@ -7,25 +7,4 @@
   .bd-header-article__end {
     margin-left: auto;
   }
-
-  // We hide this at the secondary breakpoint because no buttons are present here
-  @include media-breakpoint-up($breakpoint-sidebar-secondary) {
-    display: none;
-  }
-}
-
-// Toggle labels
-label {
-  &.sidebar-toggle {
-    display: flex;
-    cursor: pointer;
-    font-size: 1.2rem;
-    align-items: center;
-    color: var(--pst-color-muted);
-  }
-
-  // Flip the icon right-to-left on the left side
-  &.primary-toggle {
-    transform: scale(-1, 1);
-  }
 }

src/pydata_sphinx_theme/assets/styles/sections/_header.scss

@@ -1,5 +1,18 @@
-.navbar {
+/**
+ * The header at the top of the page.
+ */
+
+// If we want the shadow to only point downward in the future, set
+// box-shadow to: 0 0.125rem 0.25rem -0.125rem rgba(0, 0, 0, 0.11);
+.bd-header {
   position: sticky;
+  top: 0;
+  z-index: $zindex-fixed;
+
+  // Overrides bootstrap
+  background: var(--pst-color-on-background) !important;
+  box-shadow: 0 0.125rem 0.25rem 0 var(--pst-color-shadow);
+
   min-height: var(--pst-header-height);
   width: 100%;
   padding: 0.5rem 0;
@@ -12,10 +25,13 @@
     padding-right: 1rem;
   }
 
-  #navbar-collapsible {
-    // Remove padding because we inherit padding from the parent container
-    padding-left: 0;
-    padding-right: 0;
+  // Hide the header items on mobile
+  .navbar-header-items {
+    display: none;
+    @include media-breakpoint-up($breakpoint-sidebar-primary) {
+      display: inherit;
+      padding: 0;
+    }
   }
 
   #navbar-end,
@@ -37,37 +53,6 @@
     gap: 0.5rem;
   }
 
-  // One breakpoint less than $breakpoint-header. See variables/_layout.scss for more info.
-  @include media-breakpoint-down(md) {
-    // Make it scrollable with a max height on mobile in cases there are many items
-    max-height: 90vh;
-    overflow-y: visible;
-    @include scrollbar-style;
-
-    // If we're expanded, then make it possible to scroll if overflow
-    &.shown {
-      overflow-y: auto;
-    }
-
-    button.navbar-toggler {
-      border-color: var(--pst-color-text-muted);
-      color: var(--pst-color-text-muted);
-    }
-  }
-
-  label {
-    // Override a bootstrap default
-    margin-bottom: 0;
-  }
-}
-
-// If we want the shadow to only point downward in the future, set
-// box-shadow to: 0 0.125rem 0.25rem -0.125rem rgba(0, 0, 0, 0.11);
-.bd-header.navbar-light#navbar-main {
-  // Overrides bootstrap
-  background: var(--pst-color-on-background) !important;
-  box-shadow: 0 0.125rem 0.25rem 0 var(--pst-color-shadow);
-
   .navbar-nav {
     display: flex;
     align-items: center;
@@ -83,6 +68,7 @@
       .dropdown-menu {
         z-index: $zindex-popover;
         box-shadow: 0 0 0.3rem 0.1rem var(--pst-color-shadow);
+        background-color: var(--pst-color-on-background);
         padding: 0.5rem 1rem;
         margin: 0.5rem 0;
         min-width: 20rem;
@@ -96,30 +82,51 @@
   }
 }
 
-.navbar-header a {
-  padding: 0 15px;
-}
-
 // inline the element in the navbar as long as they fit and use display block when collapsing
-@include media-breakpoint-up($breakpoint-header) {
-  .navbar-center-item {
-    display: inline-block;
-  }
-}
-
-.toc-entry > .nav-link.active {
-  font-weight: 600;
-  color: var(--pst-color-primary);
-  background-color: transparent;
-  border-left: 2px solid var(--pst-color-primary);
-}
-
-.nav-link:hover {
-  border-style: none;
+.navbar-center-item {
+  display: inline-block;
 }
 
 #navbar-main-elements li.nav-item i {
   font-size: 0.7rem;
   padding-left: 2px;
   vertical-align: middle;
 }
+
+/**
+ * Showing and hiding the sidebar toggle buttons and header items
+ */
+// Hide the header items on mobile
+.bd-header {
+  // Toggle labels
+  label {
+    &.sidebar-toggle {
+      display: flex;
+      cursor: pointer;
+      font-size: 1.2rem;
+      align-items: center;
+      color: var(--pst-color-muted);
+      margin-bottom: 0;
+    }
+
+    &.primary-toggle {
+      @include media-breakpoint-up($breakpoint-sidebar-primary) {
+        display: none;
+      }
+    }
+
+    &.secondary-toggle {
+      @include media-breakpoint-up($breakpoint-sidebar-secondary) {
+        display: none;
+      }
+    }
+  }
+
+  // Hide the navbar header items on mobile because they're in the sidebar
+  .navbar-header-items {
+    display: none;
+    @include media-breakpoint-up($breakpoint-sidebar-primary) {
+      display: inherit;
+    }
+  }
+}