Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

NavBar: layout does not switch to RTL for RTL locales

Ouverte
  • Quelque chose ne va pas ?
#45 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

Difficulté
3/5
Temps estimé
1-2 jours
Accessibilité débutants
68/100
Type d'issue
Fonctionnalité
Clarté
Clairement spécifiée
Activité
Active
Stack technique
react, tailwindcss, typescript
Domaine
frontend, internationalization

Piste de recherche

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.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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.
Langage dominant
TypeScript
Étoiles
39
Forks
16
Merge moyen
2 j 12 h
PR mergées (30 j)
10

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de babelize/babelize-elements

Toutes les issues de babelize/babelize-elements

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.