Skip to content

Commit 2bf6de9

Browse files
committed
💄 Replace language toggle with dropdown menu
Convert binary language toggle button to a dropdown menu for better scalability. The dropdown displays the current language code (EN/FR) and shows full language names in the menu (English/Français). This prepares the UI for adding additional languages beyond the current English and French support. Changes: - Replace Button with Dropdown component in LanguageSwitcher - Update translation structure from "switchTo" to "languages" object - Show active language with highlighted menu item - Maintain localStorage persistence for language selection
1 parent 3406943 commit 2bf6de9

File tree

3 files changed

+30
-15
lines changed

3 files changed

+30
-15
lines changed

public/locales/en/header.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
{
22
"about": "About",
33
"languageSwitcher": {
4-
"switchTo": "FR"
4+
"languages": {
5+
"en": "English",
6+
"fr": "Français"
7+
}
58
}
69
}

public/locales/fr/header.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
{
22
"about": "À propos",
33
"languageSwitcher": {
4-
"switchTo": "EN"
4+
"languages": {
5+
"en": "English",
6+
"fr": "Français"
7+
}
58
}
69
}

src/components/LanguageSwitcher.tsx

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,35 @@
1-
import { Button } from "react-bootstrap";
1+
import { Dropdown } from "react-bootstrap";
22
import { useTranslation } from "react-i18next";
33

44
const LOCALE_STORAGE_KEY = "edilkamin-locale";
55

66
const LanguageSwitcher = () => {
77
const { t, i18n } = useTranslation("header");
88

9-
const switchLanguage = () => {
10-
const newLocale = i18n.language === "en" ? "fr" : "en";
11-
i18n.changeLanguage(newLocale);
12-
localStorage.setItem(LOCALE_STORAGE_KEY, newLocale);
9+
const languages = ["en", "fr"];
10+
11+
const switchLanguage = (locale: string) => {
12+
i18n.changeLanguage(locale);
13+
localStorage.setItem(LOCALE_STORAGE_KEY, locale);
1314
};
1415

1516
return (
16-
<Button
17-
variant="outline-light"
18-
size="sm"
19-
onClick={switchLanguage}
20-
className="ms-2"
21-
>
22-
{t("languageSwitcher.switchTo")}
23-
</Button>
17+
<Dropdown className="ms-2">
18+
<Dropdown.Toggle variant="outline-secondary">
19+
{i18n.language.toUpperCase()}
20+
</Dropdown.Toggle>
21+
<Dropdown.Menu>
22+
{languages.map((locale) => (
23+
<Dropdown.Item
24+
key={locale}
25+
active={i18n.language === locale}
26+
onClick={() => switchLanguage(locale)}
27+
>
28+
{t(`languageSwitcher.languages.${locale}`)}
29+
</Dropdown.Item>
30+
))}
31+
</Dropdown.Menu>
32+
</Dropdown>
2433
);
2534
};
2635

0 commit comments

Comments
 (0)