fix(navbar): mirror layout for RTL locales by Wenyan0315 · Pull Request #52 · babelize/babelize-elements

Wenyan0315 · 2026-10-18T08:46:32Z

Description

Selecting Arabic in NavBar changes the labels but leaves the bar and language dropdown left-to-right. Derive the root direction from the selected locale (Locale.rtl first, then shared isRtl), honor an explicit dir prop, align the dropdown to inline-end, and give each option its own direction with start-aligned labels. Desktop and mobile now mirror with the same rule as LanguageSwitcher.

Closes #45

Type of change

Bug fix

Validation

bun install --frozen-lockfile with Bun 1.3.14 — checked 712 installs across 897 packages, no changes.
npm run lint, npm run format:check, npm run typecheck — passed.
npm run test — 192 tests passed; registry import-closure check passed. The 10 added cases cover locale selection, controlled updates, regional locale fallback, rtl: true/false, explicit dir overrides, and per-option direction in both menus. Seven of the new cases failed before the fix.
npm run build, npm run build:lib, npm run test:pack, git diff --check — passed. Packaging smoke check includes ESM/SSR, CJS, utils subpath and preserved client directives.
Chromium component renders: 8 scenarios (1200px / 390px × light / dark × LTR / RTL). Verified computed root direction, dropdown inline-end alignment and no horizontal page overflow; screenshots were visually inspected.

Local checks used Node 22.23.2. The screenshots use the actual before/after library components with identical props and Tailwind styles in a standalone Vite harness, rather than the full docs page. No dependency or lockfile changes.

Screenshots / Recording

Each screenshot shows Before above After, with the language menu open (and the mobile menu open at 390px).

All 8 before/after views (LTR/RTL, desktop/mobile, light/dark)

View	LTR	RTL
Desktop, light	Screenshot	Screenshot
Desktop, dark	Screenshot	Screenshot
Mobile, light	Screenshot	Screenshot
Mobile, dark	Screenshot	Screenshot

Checklist

Dark mode / responsive styles verified
Frozen dependency installation verified (this repository uses bun.lock)
Lint, format, types, tests, docs/library builds and packaging passed locally
Upstream CI verify passed (run)

Usage

<NavBar locales={[{ code: "en" }, { code: "ar" }]} defaultValue="ar" />
// To override locale-derived layout:
<NavBar locales={[{ code: "ar" }]} dir="ltr" />

AI-assisted implementation, testing and screenshot capture. Only navbar.tsx and its regression tests are changed.

coderabbitai · 2026-10-18T08:46:48Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults
Review profile: CHILL
Plan: Advanced
Run ID: ee34e911-8b3b-4118-a970-6db4ae0721ad

📥 Commits

Reviewing files that changed from the base of the PR and between 46a94a5 and 4c9d1fc.

📒 Files selected for processing: 2

src/registry/components/navbar.tsx
test/navbar.test.tsx

Included review availability: This review used your included allowance. Your plan provides up to 1 included review per hour; 0 remain after this review.

📝 Walkthrough

The NavBar now derives navigation direction from an explicit dir prop or the active locale. Language menu options receive locale-specific direction, and the dropdown uses logical end positioning and start-aligned option text.

Changes: NavBar RTL Direction

Layer / File(s)	Summary
Derive and apply navigation direction `src/registry/components/navbar.tsx`, `test/navbar.test.tsx`	The NavBar derives direction from the explicit `dir` prop or the active locale and applies it to the navigation element. Tests cover locale changes, RTL overrides, explicit direction values, and controlled updates.
Set language menu alignment and option direction `src/registry/components/navbar.tsx`, `test/navbar.test.tsx`	The dropdown uses logical end positioning. Each language option receives direction from its locale override or locale code, and its text is start-aligned. Tests check option direction in both menus.

Priority: ➖ Normal

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Bug fix · Severity of issue fixed: Medium

Merge Risk: ⚪ Minimal · up to 4c9d1

The RTL navbar change appears ready to merge after normal checks; no actionable merge risk remains.

Pre-merge checks: 5

Check name	Status	Explanation
Linked Issues check		Issue `#45` coding requirements are met. `NavBar` sets `dir` from `activeLocale.rtl` first, then `isRtl(locale)`, and an explicit `dir` prop overrides the result. The single nav direction covers desktop…
Out of Scope Changes check		The changes are limited to `NavBar` direction handling, logical dropdown alignment, per-option direction and label alignment, plus regression tests for issue `#45`. No unrelated source, dependency, or l…
Docstring Coverage		No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 2…
Description Check		Check skipped - CodeRabbit’s high-level summary is enabled.
Title check		The title clearly and concisely describes the main change: mirroring the navbar layout for RTL locales.

Full details: Linked Issues check

Explanation

Issue #45 coding requirements are met. NavBar sets dir from activeLocale.rtl first, then isRtl(locale), and an explicit dir prop overrides the result. The single nav direction covers desktop, mobile, and the mobile menu. The dropdown uses end-0. Each option sets its own direction and uses text-start. Tests cover locale changes, rtl overrides, regional fallback, controlled updates, explicit overrides, and both menu triggers.

Full details: Out of Scope Changes check

Explanation

The changes are limited to NavBar direction handling, logical dropdown alignment, per-option direction and label alignment, plus regression tests for issue #45. No unrelated source, dependency, or lockfile changes are present.

Full details: Docstring Coverage

Explanation

No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 2 files.

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create a new PR

Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

sapatmohit

Direction resolves from Locale.rtl → isRtl → explicit dir, matching LanguageSwitcher; dropdown uses inline-end; per-option dir covered by tests. No remaining physical-direction classes in NavBar. Approved.

sapatmohit · 2026-10-19T07:07:09Z

Merged, thanks @Wenyan0315.

fix(navbar): mirror layout for RTL locales

4c9d1fc

Wenyan0315 requested review from sapatmohit and ujwalbajaj as code owners October 18, 2026 08:46

sapatmohit approved these changes Oct 19, 2026

View reviewed changes

sapatmohit merged commit 2c66522 into babelize:main Oct 19, 2026
2 checks passed

Navigation Menu

Repository navigation

fix(navbar): mirror layout for RTL locales - #52

fix(navbar): mirror layout for RTL locales#52
sapatmohit merged 1 commit into
babelize:mainfrom
Wenyan0315:fix/navbar-rtl-layout

Wenyan0315 commented Oct 18, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Oct 18, 2026 •

edited

Loading

Uh oh!

sapatmohit left a comment

Uh oh!

Uh oh!

sapatmohit commented Oct 19, 2026

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

Wenyan0315 commented Oct 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of change

Validation

Screenshots / Recording

Checklist

Usage

Uh oh!

coderabbitai Bot commented Oct 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sapatmohit left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

sapatmohit commented Oct 19, 2026

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Wenyan0315 commented Oct 18, 2026 •

edited

Loading

coderabbitai Bot commented Oct 18, 2026 •

edited

Loading