docs: enhance the navbar's dropdown rendering on mobile (#2432)

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
Orange-OpenSource · Dec 27, 2023 · f9c77d7 · f9c77d7
1 parent ba93846
commit f9c77d7
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 16 deletions.
diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss
@@ -51,8 +51,27 @@
     @include media-breakpoint-down(lg) {
       border-top: 1px solid #666;
     }
+
+    .dropdown-toggle {
+      line-height: 1.5625rem;
+
+      @include media-breakpoint-up(md) {
+        line-height: 1.875rem;
+      }
+    }
   }
   // End mod
 }
 
+// Boosted mod
+.bd-header {
+  max-height: 100vh;
+  overflow: hidden auto;
+
+  @include media-breakpoint-up(lg) {
+    overflow: visible;
+  }
+}
+// End mod
+
 // Boosted mod: no `@include color-mode(dark)` since Boosted doesn't yet fully support dark mode
diff --git a/site/assets/scss/_search.scss b/site/assets/scss/_search.scss
@@ -77,6 +77,8 @@
   --docsearch-searchbox-focus-background: #{$black};
   --docsearch-text-color: #{$white};
 
+  height: auto;
+  padding: 0;
   margin: 0;
   border: 0;
 

diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html
@@ -1,4 +1,4 @@
-<header class="sticky-top">
+<header class="sticky-top bd-header">
   <nav class="navbar navbar-dark navbar-expand bg-dark supra d-none" aria-label="Supra-navigation - New release banner">
     <div class="container-xxl d-flex justify-content-center">
       <ul class="navbar-nav">
@@ -42,27 +42,26 @@
         </ul>
       </div>
       <div id="bd-navbar2" class="navbar-collapse collapse bd-navbar border-0">
-        <ul class="navbar-nav flex-row">
+        <ul class="navbar-nav flex-row me-lg-3">
           <li class="nav-item">
             <a class="nav-link nav-icon" href="{{ .Site.Params.repo }}" target="_blank" rel="noopener">
               {{ partial "icons/github.svg" }}
               <span class="visually-hidden">GitHub</span>
             </a>
           </li>
-          <li class="nav-item d-flex align-items-md-center mb-0 me-1 me-md-0 me-lg-2">
-            <div class="bd-search" id="docsearch" data-bd-docs-version="{{ .Site.Params.docs_version }}"></div>
+          <li class="nav-item">
+            <div class="bd-search nav-link nav-icon" id="docsearch" data-bd-docs-version="{{ .Site.Params.docs_version }}"></div>
           </li>
 
           {{ partial "docs-versions" . }}
         </ul>
-        <ul class="navbar-nav flex-row">
-          <li class="nav-item dropdown d-flex">
-            <a href="#" class="nav-link dropdown-toggle gap-1 mx-lg-2 bg-transparent" id="bd-theme" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static" aria-label="Toggle theme (auto)">
+        <ul class="navbar-nav flex-row ms-lg-3">
+          <li class="nav-item dropdown">
+            <button class="nav-link nav-icon dropdown-toggle" id="bd-theme" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static" aria-label="Toggle theme (auto)">
               <svg class="bi theme-icon-active"><use href="#circle-half"></use></svg>
-              <span class="d-lg-none ms-2" aria-hidden="true" id="bd-theme-text">Toggle theme</span>
-              <span class="visually-hidden">Toggle theme</span>
-            </a>
-            <ul class="dropdown-menu dropdown-menu-end dropdown-menu-dark position-absolute" aria-labelledby="bd-theme-text">
+              <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+            </button>
+            <ul class="dropdown-menu dropdown-menu-end dropdown-menu-dark mb-2" aria-labelledby="bd-theme-text">
               <li>
                 <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
                   <svg class="bi me-2"><use href="#sun-fill"></use></svg>

diff --git a/site/layouts/partials/docs-versions.html b/site/layouts/partials/docs-versions.html
@@ -10,11 +10,11 @@
   {{- $versions_link = printf "%s/" $page_slug -}}
 {{- end }}
 
-<li class="nav-item dropdown d-flex">
-  <a href="#" class="nav-link dropdown-toggle gap-1 mx-0 bg-transparent" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
-    <span class="d-lg-none" aria-hidden="true">Boosted</span><span class="visually-hidden">Boosted&nbsp;</span> v{{ .Site.Params.docs_version }} <span class="visually-hidden">(switch to other versions)</span>
-  </a>
-  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-dark position-absolute">
+<li class="nav-item dropdown">
+  <button class="nav-link nav-icon dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
+    <span class="d-lg-none" aria-hidden="true">Boosted&nbsp;</span><span class="visually-hidden">Boosted&nbsp;</span>v{{ .Site.Params.docs_version }} <span class="visually-hidden">(switch to other versions)</span>
+  </button>
+  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-dark mb-2 mb-lg-0">
     <li><h6 class="dropdown-header">v5 releases</h6></li>
     <li>
       <a class="dropdown-item d-flex align-items-center justify-content-between active" aria-current="true" href="{{ if .IsHome }}/{{ else }}/docs/{{ .Site.Params.docs_version }}/{{ $versions_link }}{{ end }}">