FIX: Search bar and navigation dropdown style (#770)

pydata · Jul 1, 2022 · 50dd08e · 50dd08e
1 parent 2f729ca
commit 50dd08e
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 14 deletions.
diff --git a/src/pydata_sphinx_theme/assets/styles/components/_search.scss b/src/pydata_sphinx_theme/assets/styles/components/_search.scss
@@ -68,6 +68,7 @@
   }
 }
 
+// __search-container will only show up when we use the search pop-up bar
 .search-button__search-container {
   display: none;
   // Center in middle of screen just underneath header

diff --git a/src/pydata_sphinx_theme/assets/styles/components/header/_header-logo.scss b/src/pydata_sphinx_theme/assets/styles/components/header/_header-logo.scss
@@ -2,7 +2,8 @@
   position: relative;
   height: var(--pst-header-height);
   width: auto;
-  padding: 0.5rem 0;
+  padding: 0;
+  margin: 0;
   display: flex;
   align-items: center;
   gap: 0.5rem;

diff --git a/src/pydata_sphinx_theme/assets/styles/sections/_header.scss b/src/pydata_sphinx_theme/assets/styles/sections/_header.scss
@@ -2,7 +2,7 @@
   position: sticky;
   min-height: var(--pst-header-height);
   width: 100%;
-  padding: 0;
+  padding: 0.5rem 0;
   max-width: 100vw;
 
   .container-xl {
@@ -27,14 +27,22 @@
     gap: 0.5rem;
   }
 
-  // On smaller screens, add margin to the navbar start/stop
-  @include media-breakpoint-down(lg) {
+  // Note: breakpoint-down *starts at the next-highest level*
+  // So media-breakpoint-down(md) triggers the behavior at lg
+  // ref: https://github.com/twbs/bootstrap/pull/29148 (it is changed in BS5)
+  @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: auto;
+    @include scrollbar-style;
+
+    // On smaller screens, add margin to the navbar start/stop
     #navbar-start {
-      margin-left: 1em;
+      margin-left: 1rem;
     }
 
     button.navbar-toggler {
-      margin-right: 1em;
+      margin-right: 1rem;
       border-color: var(--pst-color-text-muted);
       color: var(--pst-color-text-muted);
     }
@@ -80,19 +88,43 @@
 
     // Dropdowns for the extra links
     .dropdown {
-      z-index: $zindex-popover;
-      height: 2.2rem; // Slight hack to make this aligned with navbar links
-
+      // On mobile, the dropdown behaves like any other link, no hiding
       button {
+        display: none;
         color: var(--pst-color-text-muted);
       }
 
       .dropdown-menu {
-        color: var(--pst-color-text-base);
+        display: flex;
+        flex-direction: column;
+        padding: 0;
+        margin: 0;
         background-color: var(--pst-color-on-background);
-        box-shadow: 0 0 0.3rem 0.1rem var(--pst-color-shadow);
-        padding: 0.5rem 1rem;
-        min-width: 20rem;
+        color: var(--pst-color-text-base);
+        border: none;
+      }
+
+      // On wide screens, the dropdown becomes a pop-up menu
+      @include media-breakpoint-up(lg) {
+        height: 2.2rem; // Slight hack to make this aligned with navbar links
+
+        button {
+          display: flex;
+          align-items: center;
+        }
+
+        .dropdown-menu {
+          z-index: $zindex-popover;
+          box-shadow: 0 0 0.3rem 0.1rem var(--pst-color-shadow);
+          padding: 0.5rem 1rem;
+          margin: 0.5rem 0;
+          min-width: 20rem;
+
+          // Hide the menu unless show has been clicked
+          &:not(.show) {
+            display: none;
+          }
+        }
       }
     }
   }

diff --git a/src/pydata_sphinx_theme/assets/styles/variables/_layout.scss b/src/pydata_sphinx_theme/assets/styles/variables/_layout.scss
@@ -2,5 +2,6 @@
   /*****************************************************************************
   * Overall Layout Variables
   */
-  --pst-header-height: 60px;
+  // This will impact the top offset for many sections
+  --pst-header-height: 3rem;
 }