/
index.tsx
82 lines (75 loc) · 2.57 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import {useAlternatePageUtils} from '@docusaurus/theme-common/internal';
import {translate} from '@docusaurus/Translate';
import {useLocation} from '@docusaurus/router';
import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
import IconLanguage from '@theme/Icon/Language';
import type {LinkLikeNavbarItemProps} from '@theme/NavbarItem';
import type {Props} from '@theme/NavbarItem/LocaleDropdownNavbarItem';
import styles from './styles.module.css';
export default function LocaleDropdownNavbarItem({
mobile,
dropdownItemsBefore,
dropdownItemsAfter,
...props
}: Props): JSX.Element {
const {
i18n: {currentLocale, locales, localeConfigs},
} = useDocusaurusContext();
const alternatePageUtils = useAlternatePageUtils();
const {search, hash} = useLocation();
const localeItems = locales.map((locale): LinkLikeNavbarItemProps => {
const baseTo = `pathname://${alternatePageUtils.createUrl({
locale,
fullyQualified: false,
})}`;
// preserve ?search#hash suffix on locale switches
const to = `${baseTo}${search}${hash}`;
return {
label: localeConfigs[locale]!.label,
lang: localeConfigs[locale]!.htmlLang,
to,
target: '_self',
autoAddBaseUrl: false,
className:
// eslint-disable-next-line no-nested-ternary
locale === currentLocale
? // Similar idea as DefaultNavbarItem: select the right Infima active
// class name. This cannot be substituted with isActive, because the
// target URLs contain `pathname://` and therefore are not NavLinks!
mobile
? 'menu__link--active'
: 'dropdown__link--active'
: '',
};
});
const items = [...dropdownItemsBefore, ...localeItems, ...dropdownItemsAfter];
// Mobile is handled a bit differently
const dropdownLabel = mobile
? translate({
message: 'Languages',
id: 'theme.navbar.mobileLanguageDropdown.label',
description: 'The label for the mobile language switcher dropdown',
})
: localeConfigs[currentLocale]!.label;
return (
<DropdownNavbarItem
{...props}
mobile={mobile}
label={
<>
<IconLanguage className={styles.iconLanguage} />
{dropdownLabel}
</>
}
items={items}
/>
);
}