.

Orange-OpenSource · Dec 20, 2023 · d78bcd9 · d78bcd9
1 parent dc28e36
commit d78bcd9
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 40 deletions.
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
@@ -456,7 +456,8 @@
  }
  // End mod
 
- .navbar-nav-scroll {
+ .navbar-nav-scroll,
+ &.navbar-nav-scroll {
  overflow: visible;
  }
 

diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss
@@ -51,6 +51,14 @@
  @include media-breakpoint-down(lg) {
  border-top: 1px solid #666;
  }
+
+ .dropdown-toggle {
+ line-height: 1.3125rem;
+
+ @include media-breakpoint-up(md) {
+ line-height: 1.875rem;
+ }
+ }
  }
  // End mod
 }

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/content/docs/5.3/components/orange-navbar.md b/site/content/docs/5.3/components/orange-navbar.md
@@ -140,6 +140,10 @@ An additional navbar (with text or icon items) can be added on the right of the
 
 ## Global header
 
+We strongly recommend to add `.navbar-nav-scroll` and `style="--bs-navbar-scroll-height: 100vh;"` to the main `.navbar` relating to [this part of the docs]({{< docsref "/components/navbar#scrolling" >}}).
+
+If you have a navigation under, you may need to tweak a bit the previous solution or we refactor navbar a bit, meaning change html for folks.
+
 ### Standard
 
 <div class="bd-example p-0">

diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html
@@ -8,7 +8,7 @@
  </ul>
  </div>
  </nav>
- <nav class="navbar navbar-dark bg-dark navbar-expand-lg" aria-label="Main navigation">
+ <nav class="navbar navbar-dark bg-dark navbar-expand-lg navbar-nav-scroll" style="--bs-scroll-height: 100vh;" aria-label="Main navigation">
  <div class="container-xxl">
  <div class="navbar-brand me-auto me-lg-4">
  <a class="stretched-link" href="/">
@@ -42,49 +42,50 @@
  </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)">
- <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">
- <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 theme-icon"><use href="#sun-fill"></use></svg>
- Light
- <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
- </button>
- </li>
- <li>
- <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
- <svg class="bi me-2 theme-icon"><use href="#moon-stars-fill"></use></svg>
- Dark
- <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
- </button>
- </li>
- <li>
- <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
- <svg class="bi me-2 theme-icon"><use href="#circle-half"></use></svg>
- Auto
- <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
- </button>
- </li>
- </ul>
+ <ul class="navbar-nav ms-lg-3">
+ <li class="nav-item">
+ <div class="d-inline-block 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" 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 theme-icon"><use href="#sun-fill"></use></svg>
+ Light
+ <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
+ </button>
+ </li>
+ <li>
+ <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
+ <svg class="bi me-2 theme-icon"><use href="#moon-stars-fill"></use></svg>
+ Dark
+ <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
+ </button>
+ </li>
+ <li>
+ <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
+ <svg class="bi me-2 theme-icon"><use href="#circle-half"></use></svg>
+ Auto
+ <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
+ </button>
+ </li>
+ </ul>
+ </div>
  </li>
  </ul>
  </div>

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 }}">