fix: collapse docs navbar into hamburger when it overflows#1117
Open
dkrizan wants to merge 2 commits into
Open
fix: collapse docs navbar into hamburger when it overflows#1117dkrizan wants to merge 2 commits into
dkrizan wants to merge 2 commits into
Conversation
The desktop navbar (logo, wordmark, GitHub stars, all section links, Login/Sign up and search) only fits around 1320px, but Docusaurus only collapses into the hamburger drawer below its hardcoded 996px breakpoint. In the ~1000-1320px band the links wrapped to two lines and the wordmark was ellipsis-truncated. Extend the existing hamburger mechanism up to 1320px: keep the logo, wordmark and GitHub stars visible at every width, and collapse the navigation links into the native drawer below 1320px. The drawer is reused by relaxing its render gate (swizzled Navbar/MobileSidebar) and a shared useNavbarCollapsed media-query hook; no dependency patching.
dkrizan
force-pushed
the
dkrizan/fix-docs-navbar-overflow
branch
from
44e96f1 to
74c9738
Compare
✅ Deploy Preview for tolgee-docs ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for tolgee-docs ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
On a range of intermediate widths (roughly 1000–1320px) the docs header rendered broken: the navigation labels (e.g. "JavaScript SDK") wrapped to two lines and the "Tolgee" wordmark was ellipsis-truncated to "Tolg…".
The full desktop navbar — logo, wordmark, GitHub stars, all section links, Login/Sign up and search — only fits around 1320px, but Docusaurus only collapses into the hamburger drawer below its hardcoded 996px breakpoint. The ~320px band in between had no room, so flex children shrank and wrapped.
Fix
Extend the existing hamburger mechanism upward instead of shrinking the bar:
This reuses the existing slide-in drawer (consistent UX, including the per-page doc-sidebar integration) with no dependency patching.
Changes
src/component/navbar/useNavbarCollapsed.ts(new) —matchMediahook exporting the single source of truthNAVBAR_COLLAPSE_QUERY.src/theme/Navbar/MobileSidebar/index.tsx(new swizzle) — renders the native drawer whenever the navbar is collapsed (or already open), not only below 996px.src/theme/Navbar/Content/index.tsx— GitHub button always rendered (washidden xl:flex); effect closes the drawer if the viewport widens past the breakpoint while open.src/css/custom.css— GitHub button always visible; below 1320px show the toggle and hide the inline navbar links (extends Infima's 996px rule).src/theme/Navbar/Content/styles.module.css— theme toggle hidden in the bar below the breakpoint (it lives in the drawer header there).Testing
Verified live in the browser at 1320 (full bar), 1319 (collapsed), 1184, and 390px, including opening the hamburger drawer and confirming all links are present. ESLint and
tscpass for the changed files.Note
Keeping logo + wordmark + GitHub stars always visible and requiring the full nav to fit means common 1280px laptops now show the hamburger — an intentional consequence of the desired behavior.