Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

NavBar: layout does not switch to RTL for RTL locales

Abierto
  • ¿Algo no está bien?
#45 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
68/100
Tipo de issue
Nueva funcionalidad
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
react, tailwindcss, typescript
Área
frontend, internationalization

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.
Lenguaje dominante
TypeScript
Estrellas
39
Forks
16
Merge medio
2 d 12 h
PR fusionados (30 d)
10

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de babelize/babelize-elements

Todos los issues de babelize/babelize-elements

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.