Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

NavBar: layout does not switch to RTL for RTL locales

Offen
  • Stimmt etwas nicht?
#45 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Anfängerfreundlichkeit
68/100
Issue-Typ
Feature
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
react, tailwindcss, typescript
Bereich
frontend, internationalization

Rechercherichtung

Start with src/registry/components/navbar.tsx, especially the language menu around line 161, and read how LanguageSwitcher derives direction from the active locale and isRtl. Check the existing NavBar tests and add coverage for locale direction, Locale.rtl overrides, and an explicit dir prop. Done means the bar and dropdown mirror in LTR and RTL, option labels align at the start, and the requested desktop and mobile light and dark screenshots are covered.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

bug component rtl-layout

Problem

Selecting an RTL locale in NavBar translates the link labels but leaves the layout left-to-right. With ar selected in the docs demo:

  • The logo stays on the left, links read left to right, and the language/GitHub/CTA group stays on the right.
  • The language menu is pinned with a physical right-0 (src/registry/components/navbar.tsx:161), so it doesn't mirror.
  • Option labels in the language menu render centered instead of start-aligned (the option <button> has no text-start, so the label inherits the button's default centering).

NavBar never sets dir. LanguageSwitcher already derives it from the active locale (activeLocale?.rtl ?? isRtl(locale)).

Expected

  • NavBar sets dir="rtl" on the <nav> when the active locale is RTL, using the same rule as LanguageSwitcher (Locale.rtl override first, then isRtl from locale-data). An explicit dir prop wins.
  • Layout mirrors via logical utilities: end-0/start-0 instead of right-0/left-0, ms-*/me-* instead of ml-*/mr-*, and text-start on option labels. This applies to the desktop bar, the mobile bar, the mobile menu and the language dropdown.
  • Each option keeps its own dir, so mixed-script lists read correctly.

Acceptance

  • Selecting ar flips the whole bar. Selecting en flips it back.
  • Language dropdown opens aligned to the trigger's inline-end edge in both directions.
  • Option labels are start-aligned in LTR and RTL.
  • dir prop overrides the locale-derived direction.
  • Tests for: dir on <nav> for an RTL locale, the Locale.rtl override (rtl: true / rtl: false), and the explicit dir prop.
  • Screenshots: LTR and RTL, desktop and ~390px, light and dark.
Vorherrschende Sprache
TypeScript
Sterne
39
Forks
16
Ø Merge
2 T. 12 Std.
Gemergte PRs (30 T.)
10

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus babelize/babelize-elements

Alle Issues in babelize/babelize-elements

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.