Language switch behavior

The language switcher lives in the header utility bar (desktop) and the mobile drawer. It is a globe-icon dropdown listing all 3 supported locales — only EN and AR are active; FR carries a "Soon" badge and is disabled.

The 3 dropdown options

✨ العربية (Arabic)

Native label "العربية". Switches the URL to `/ar/...` and sets `dir="rtl"`. Active immediately.

✨ English

Native label "English". Switches the URL to `/en/...` and sets `dir="ltr"`. Active immediately.

Français (with "Soon" badge)

Disabled. Carries a small orange "Soon" badge. Clicking does nothing — the menu item is unselectable until the FR content authoring ships.

Switch behavior (technical)

1. User taps a locale option.
2. `I18nService.setLocale(next)` updates the `locale` signal.
3. The header reads the current URL via `window.location.pathname`.
4. A regex swap (`/^\/(ar|en)(?=\/|$)/`) replaces the locale segment with the new one, preserving the rest of the path + query + hash.
5. `router.navigateByUrl(swapped)` triggers Angular routing; the new locale renders, `dir` flips, the dictionary lookups pick up the new locale.
6. The dropdown auto-closes via `@HostListener("document:click")` on outside click or explicit selection.