Skip to content

Commit 9264ecf

Browse files
zzq0826zzq0826
committed
Update language picker
1 parent a41818c commit 9264ecf

File tree

2 files changed

+102
-57
lines changed

2 files changed

+102
-57
lines changed

‎src/components/Header/Header.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ const section = frontmatter?.section ?? ""
7777
)
7878
}
7979
<ThemeModeToggle client:only="preact" dark={dark} />
80-
<LanguageSelector class="language-selector" />
80+
<LanguageSelector class="language-selector" dark={dark} />
8181
<a href="https://github.com/scroll-tech/scroll-documentation" class="github-url" target="_blank" rel="nofollow">
8282
<span
8383
class={clsx(

‎src/components/Header/LanguageSelector/LanguageSelector.astro‎

Lines changed: 101 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -3,93 +3,138 @@ import i18next from "i18next"
33
import { localizePath } from "astro-i18next"
44
import localeEmoji from "locale-emoji"
55
import ISO6991 from "iso-639-1"
6+
import { clsx } from "~/lib"
67
78
const supportedLanguages = i18next.languages
8-
const currentLanguage = i18next.language
99
1010
const { pathname } = Astro.url
1111
1212
const { showFlag = false, languageMapping, ...attributes } = Astro.props
13-
---
13+
const { dark } = Astro.props
1414
15-
<div class="language-selector">
16-
<ul class="options-list">
17-
{
18-
supportedLanguages.map((supportedLanguage) => {
19-
let value = localizePath(pathname, supportedLanguage)
20-
const flag = showFlag ? localeEmoji(supportedLanguage) + " " : ""
21-
let nativeName = ""
22-
if (languageMapping && languageMapping.hasOwnProperty(supportedLanguage)) {
23-
nativeName = languageMapping[supportedLanguage]
24-
} else {
25-
nativeName = ISO6991.getNativeName(supportedLanguage)
26-
}
15+
const getLabel = (language) => {
16+
const flag = showFlag ? localeEmoji(language) + " " : ""
17+
let nativeName = ""
18+
if (languageMapping && languageMapping.hasOwnProperty(language)) {
19+
nativeName = languageMapping[language]
20+
} else {
21+
nativeName = ISO6991.getNativeName(language)
22+
}
2723
28-
const label = flag + nativeName
24+
return flag + nativeName
25+
}
26+
---
2927

30-
return (
31-
<li value={value} onclick={`if ("${value}" !== window.location.pathname) location.href = "${value}";`}>
32-
{label}
33-
</li>
34-
)
35-
})
36-
}
37-
</ul>
28+
<div class={clsx("language-selector", dark && "dark")}>
29+
<div class="current-language">
30+
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
31+
<path
32+
d="M12.0886 2.19173C11.899 1.99095 11.5825 1.98187 11.3817 2.17145C11.181 2.36103 11.1719 2.67748 11.3615 2.87827L12.0886 2.19173ZM9.82896 1.70578C10.0724 1.83614 10.3754 1.74448 10.5058 1.50104C10.6361 1.25761 10.5445 0.954588 10.301 0.824224L9.82896 1.70578ZM6.475 0.71L6.83644 1.05549L6.83781 1.05405L6.475 0.71ZM6.51 13.325L6.84218 12.9513L6.84158 12.9508L6.51 13.325ZM7.43 13.27L7.8006 13.6056L7.80182 13.6043L7.43 13.27ZM11.3615 2.87827C12.3774 3.95429 13 5.40282 13 7H14C14 5.13718 13.2726 3.44571 12.0886 2.19173L11.3615 2.87827ZM13 7C13 10.3139 10.3139 13 7 13V14C10.8661 14 14 10.8661 14 7H13ZM7 13C3.68614 13 1 10.3139 1 7H0C0 10.8661 3.13386 14 7 14V13ZM1 7C1 3.68614 3.68614 1 7 1V0C3.13386 0 0 3.13386 0 7H1ZM7 1C8.02607 1 8.98516 1.25391 9.82896 1.70578L10.301 0.824224C9.31484 0.296094 8.19393 0 7 0V1ZM1.50005 4.99H12.965V3.99H1.50005V4.99ZM1.49999 9.995H12.97V8.995H1.49999V9.995ZM7.81355 0.406447C7.39863 -0.00847185 6.63779 -0.188318 6.11219 0.365954L6.83781 1.05405C6.86485 1.02554 6.89025 1.0169 6.92687 1.01975C6.97276 1.02331 7.04172 1.04883 7.10645 1.11355L7.81355 0.406447ZM6.11356 0.364509C5.02397 1.5044 4 3.93397 4 7.225H5C5 4.10603 5.97603 1.9556 6.83644 1.05549L6.11356 0.364509ZM4 7.225C4 10.5231 5.07388 12.7206 6.17842 13.6992L6.84158 12.9508C6.01612 12.2194 5 10.3369 5 7.225H4ZM6.17782 13.6987C6.65963 14.127 7.3826 14.0672 7.8006 13.6056L7.0594 12.9344C6.9974 13.0028 6.90037 13.003 6.84218 12.9513L6.17782 13.6987ZM7.80182 13.6043C8.80675 12.4865 10 10.6511 10 7.23H9C9 10.3689 7.92325 11.9735 7.05818 12.9357L7.80182 13.6043ZM10 7.23C10 3.85511 8.90599 1.49888 7.81355 0.406447L7.10645 1.11355C7.96401 1.97112 9 4.04489 9 7.23H10Z"
33+
fill="currentColor"></path>
34+
</svg>
35+
<span>{getLabel(supportedLanguages[0])}</span>
36+
</div>
37+
<div class="options-modal">
38+
<ul class="options-list">
39+
{
40+
supportedLanguages.map((supportedLanguage, idx) => {
41+
let value = localizePath(pathname, supportedLanguage)
42+
const label = getLabel(supportedLanguage)
43+
44+
return (
45+
<li value={value} onclick={`if ("${value}" !== window.location.pathname) location.href = "${value}";`}>
46+
{idx === 0 ? (
47+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
48+
<rect x="0.5" y="0.5" width="15" height="15" rx="7.5" stroke="currentColor" />
49+
<circle cx="7.99989" cy="8.00007" r="4.8" fill="currentColor" />
50+
</svg>
51+
) : (
52+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
53+
<rect x="0.5" y="0.5" width="15" height="15" rx="7.5" stroke="currentColor" />
54+
</svg>
55+
)}
56+
<span>{label}</span>
57+
</li>
58+
)
59+
})
60+
}
61+
</ul>
62+
</div>
3863
</div>
3964

4065
<style>
4166
.language-selector {
4267
position: relative;
43-
height: 22px;
44-
width: 83px;
68+
}
69+
70+
.language-selector.dark {
71+
--black-100: #fff;
72+
--orange-500: #fff;
73+
}
74+
.language-selector:hover .options-modal {
75+
display: flex;
76+
}
77+
78+
.options-modal {
79+
position: absolute;
80+
top: 36px;
4581
display: none;
82+
padding-top: 4px;
83+
}
84+
.current-language {
85+
width: 100px;
86+
border-radius: 5px;
87+
border: 1px solid var(--black-100);
88+
display: flex;
89+
height: 36px;
90+
padding: 0 12px;
91+
justify-content: space-between;
92+
align-items: center;
93+
cursor: pointer;
94+
color: var(--black-100);
4695
}
4796

4897
.options-list {
49-
width: 83px;
50-
background-repeat: no-repeat;
51-
background-position: right 6px top 3px;
52-
background-size: 1em;
53-
text-align: center;
98+
width: 100px;
5499
font-size: 14px;
55100
font-weight: 500;
56-
line-height: 22px;
57-
height: 22px;
58101
letter-spacing: 0.14px;
59-
padding: 0px 15px;
102+
padding: 4px 12px;
60103
border-radius: 5px;
61104
border: 1px solid var(--black-100);
62105
overflow: hidden;
63106
cursor: pointer;
64-
position: absolute;
65-
top: 0;
66107
transition: height 0.3s ease;
67-
background-size: 8px;
68-
@apply bg-white dark:bg-dark-normal border-black dark:border-white;
108+
display: flex;
109+
justify-content: center;
110+
align-items: center;
111+
flex-direction: column;
112+
background: var(--white-100);
69113
}
70114

71-
.options-list:hover {
72-
height: auto;
115+
.options-list li {
116+
display: flex;
117+
width: 100%;
118+
justify-content: space-between;
119+
align-items: center;
120+
flex-direction: row;
121+
padding: 8px 0px;
122+
color: var(--black-100);
73123
}
74124

75-
.options-list li:hover {
76-
color: var(--orange-500);
125+
.options-list li svg,
126+
.current-language svg {
127+
flex-shrink: 0;
128+
width: 16px;
129+
height: 16px;
130+
color: inherit;
77131
}
78132

79-
@media (min-width: 50em) {
80-
.language-selector {
81-
width: 94px;
82-
height: 35px;
83-
}
84-
85-
.options-list {
86-
background-position: right 8px top 14px;
87-
88-
font-weight: 400;
89-
line-height: 35px;
90-
letter-spacing: 0.16px;
91-
height: 35px;
92-
width: 94px;
93-
}
133+
.options-list li span,
134+
.current-language span {
135+
flex: 1;
136+
text-align: left;
137+
margin-left: 8px;
138+
color: inherit;
94139
}
95140
</style>

0 commit comments

Comments
 (0)