Repository navigation
Add nav dropdowns and restyle the mobile menu - #641
Merged
Merged
Conversation
Mobile menu becomes a scrolling sheet of full-bleed 60px rows, with a nav item that expands in place and a full-width action slot. Desktop gets a full-bleed dropdown panel with a scrim. Both dropdown triggers use Btn, since this package's preflight leaves button backgrounds opaque on purpose. `.logoLeft` no longer sets `relative` on `.inner`: `.right` is pinned with `ml-auto` instead, so an absolutely positioned panel anchors to the header and can span the full page width. New API: leftLinksMobile, mobileActions, MobileNavDropdown, DesktopNavDropdown. Stories cover each existing consumer's link shape as a regression baseline. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Adds align ("full" | "left" | "right"), hideCaret, underlineOnOpen,
openOnHover and triggerClassName to DesktopNavDropdown. The scrim stays
a root child so it always covers the page while an anchored panel hangs
off the trigger instead.
The nav row now stretches to the navbar's full height, so an open item's
underline and an anchored panel both land on its bottom edge. `.left`
spaces with gap rather than margins on `a`, which skipped dropdown
triggers and left the row unevenly spaced.
Panel content no longer forces items-start; the navbar already centers
descendant anchors, which is what simple rows want, and cards set their
own alignment on an inner element.
Adds space-900 (#070F25) for the nav and dropdown ground.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Adds a mobileAccount slot to Navbar, rendered in its own region between the links and actions so the 60px row styling never reaches it. Mobile dropdowns get the design's chevron chip, a bottom border on the open panel, and no longer impose row styling on panel content: the `.links` rule skips anything inside [data-nav-panel], so cards and links keep their own spacing. The story's panel links carry their own classes. Also centers the mobile top bar's contents vertically, centers the actions button at 327px from md up, and sets the logo-to-links gap on the desktop nav to 64px. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The social row no longer takes `mt-auto` when actions sit directly above it, so the Sign in/out button stays at the bottom with the social links instead of splitting the free space. A transparent navbar's open mobile menu now falls back to space-900, the same ground as the opaque navbar, so signed in and signed out match. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Reverts the transparent menu fallback to the themed background-acc-1, which kept DoltHub navy out of Workbench's menu, and adds mobileMenuBgColor so a consumer can choose the open menu's ground. The open menu's sticky top bar now uses that color too, so links scrolling under it stay hidden. Stories now cover each prop this PR adds: DesktopNavDropdown's align (left/right), hideCaret, underlineOnOpen, openOnHover, className, triggerClassName and controlled isOpen/setIsOpen; MobileNavDropdown's className and controlled state; and Navbar's mobileAccount and mobileMenuBgColor. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
With a transparent navbar, the bar over the page stays transparent while the open menu's sticky bar now takes the menu's color. Adds a test for menuBgColor. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
There was a problem hiding this comment.
Copilot review overview
🔵 Needs a closer look
Moderate accessibility and null-override issues remain unresolved.
Review effort: Lite
Findings: None
What changed in this PR
Library-only navigation groundwork for Homepage v3, adding mobile menu enhancements and reusable dropdown APIs.
Changes:
- Adds configurable mobile navigation content and improved scrolling/layout.
- Adds mobile and desktop dropdowns with scrim support.
- Adds color token, exports, tests, and Storybook coverage.
| File | Description |
|---|---|
packages/components/src/tailwind/theme/base/colors.ts |
Adds the space-900 color token. |
packages/components/src/Navbar/index.tsx |
Wires new navigation props. |
packages/components/src/Navbar/ForMobile/NavDropdown.tsx |
Implements mobile dropdown behavior. |
packages/components/src/Navbar/ForMobile/NavDropdown.module.css |
Styles mobile dropdowns. |
packages/components/src/Navbar/ForMobile/index.tsx |
Integrates mobile navigation content. |
packages/components/src/Navbar/ForMobile/index.module.css |
Restyles and enables mobile menu scrolling. |
packages/components/src/Navbar/ForDesktop/NavDropdown.tsx |
Implements desktop dropdown behavior. |
packages/components/src/Navbar/ForDesktop/NavDropdown.module.css |
Styles desktop panels and scrims. |
packages/components/src/Navbar/ForDesktop/index.module.css |
Updates desktop layout and anchoring. |
packages/components/src/index.ts |
Exports the new dropdown components. |
packages/components/src/__tests__/Navbar.test.tsx |
Extends mobile navigation tests. |
packages/components/src/__stories__/MobileNavbar.stories.tsx |
Adds mobile stories. |
packages/components/src/__stories__/DesktopNavDropdown.stories.tsx |
Adds desktop dropdown stories. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
tbantle22
marked this pull request as ready for review
October 5, 2026 23:05
Also switches the desktop dropdown story to bg-space-900; its comment said the colour was not in the palette, which stopped being true when this branch added the token. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
tbantle22
changed the title
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
DoltHub was its only consumer and no longer needs it now that its navbar is always opaque. The open menu's sticky bar still takes the menu's color. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
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
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.
Library-only groundwork for the Homepage v3 and Navigation designs. No apps touched.
Mobile — the menu scrolls, rows become full-bleed 60px with dividers, and socials move into flow instead of overlapping the last link.
Desktop — dropdown panels that dim the page, either full-bleed or anchored to the trigger. They open on hover or click and underline the open item.
New API —
MobileNavDropdown,DesktopNavDropdown,Navbar'sleftLinksMobile/mobileActions/mobileAccount/mobileMenuBgColor, and aspace-900token.Shared nav layout —
.leftspaces withgaprather than margins ona,.logoLeftstops settingrelativeon.inner, and.containertrades its vertical padding forrelativeso the row can stretch full height. These reach DoltLab and Workbench too; Chromatic should confirm.Stories cover each existing consumer's link shape as a regression baseline.