Language Switcher Navbar Block for React

Every language's strings are one typed object in the LANGUAGES array at the top of the file: its code, its name in its own script (autonym) and in English, the button's name, the four links, the cta, whether it reads from the end (rtl) and whether the list leads with it (suggested). Add an object and it appears in the list, in the search and in the bar; the unseen copies that size each label are built from the same array. The list's own words (the search placeholder, the group names, "No language found.") are English constants in Picker; translate them the same way if your picker should localize too. In an app, replace setCode with your router's locale change.

rtl: true on a language sets dir="rtl" on the header and passes it to the catalog's direction provider, so the bar mirrors (the wordmark moves to the end, the actions to the start) and the library's own parts follow: the list, the drawer and the sheet are portalled out of the header, so each carries dir itself. Logical classes (ms-auto, -me-1.5) do the rest. The wordmark keeps its direction because it's artwork, and the picker's English names stay in their own direction inside the mirrored list.

The links sit in a nav named Main after the wordmark. The language button is named in the current language ("Sprache: Deutsch"), says whether the list is open and which list it controls, and opens it on Enter or Space; focus lands in the search field. Typing narrows the list by native name, English name or code (accents ignored); the arrow keys move through the rows, Enter chooses, and Escape closes the list and puts focus back on the button. The current language says "current language" to screen readers as well as showing a check, each row carries its lang so it is read in the right voice, and after a choice a hidden status line says "Language: Deutsch". The list is a command built on cmdk; the first match is highlighted as you type, and Enter chooses it.

Below the md breakpoint the language button becomes an icon (its name is still spoken) and opens a drawer from the bottom with the same search and the same twelve rows; choosing a language closes it and returns focus to the icon. Below lg the links and the action fold into a menu button that opens a sheet from the top, in the current language and, for Arabic, mirrored. At 320 pixels the bar holds the wordmark, the icon and the menu button, and nothing wraps.

A label in one language is wider than in another ("Empezar ahora" against "Başla"), which would shift the buttons beside it. Each label (the four links, the action and the button's text) sits in one grid cell together with an unseen copy of every other version, so the cell is always as wide as the widest. The unseen copies are hidden from assistive technology and from the keyboard. The bar is 64 pixels tall (56 on a phone) in every language.

Nothing moves on load or when the language changes: the words are swapped, not animated. The list fades and grows from the button, the drawer and the sheet slide in, and a band of light sweeps across the action on hover and keyboard focus. With reduced motion the list, the drawer and the sheet appear without animating and the light fades in where it stands.