Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Navbar: Handle in a proper way our dropdowns inside documentation navbar #2432

Merged
merged 6 commits into from
Dec 27, 2023
+36 −16
Merged

Navbar: Handle in a proper way our dropdowns inside documentation navbar #2432

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
cf96e9d
.
louismaximepiton Dec 20, 2023
94fb376
fix review
louismaximepiton Dec 26, 2023
d90e3b7
Fix overflow in the navbar
louismaximepiton Dec 26, 2023
33d4c0c
Merge branch 'main' into main-lmp-navbar-fix-mobile-scroll
julien-deramond Dec 26, 2023
3259613
fix
louismaximepiton Dec 27, 2023
a86b6d5
.
julien-deramond Dec 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion scss/_navbar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -456,7 +456,8 @@
}
// End mod

.navbar-nav-scroll {
.navbar-nav-scroll,
&.navbar-nav-scroll {
julien-deramond marked this conversation as resolved.
Show resolved Hide resolved
overflow: visible;
}

Expand Down
8 changes: 8 additions & 0 deletions site/assets/scss/_navbar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
Expand Down
2 changes: 2 additions & 0 deletions site/assets/scss/_search.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,8 @@
--docsearch-searchbox-focus-background: #{$black};
--docsearch-text-color: #{$white};

height: auto;
padding: 0;
margin: 0;
border: 0;

Expand Down
4 changes: 4 additions & 0 deletions site/content/docs/5.3/components/orange-navbar.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
69 changes: 35 additions & 34 deletions site/layouts/partials/docs-navbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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="/">
Expand Down Expand Up @@ -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"><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"><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"><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"><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"><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"><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>
Expand Down
10 changes: 5 additions & 5 deletions site/layouts/partials/docs-versions.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
julien-deramond marked this conversation as resolved.
Show resolved Hide resolved
</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 }}">
Expand Down
Loading