feat: Add a language drop-down menu in the Header component, including a link to Chinese documentation

[eveningwater]

Related Bug Reports or Discussions

add the drop-down mennu in the Header component.

Summary

Check List

• [ x ] pnpm run fix for formatting and linting code and docs

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
valtio	Ready	Preview	Comment	Sep 24, 2025 0:09am

[codesandbox-ci[bot]]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[overthemike]

@dai-shi We'll need to figure out valtio.dev domain stuff. Right now, I think I'm still handling the nameservers for valtio.dev and am just redirecting.

[overthemike]

@dai-shi We'll need to figure out valtio.dev domain stuff. Right now, I think I'm still handling the nameservers for valtio.dev and am just redirecting.

I think probably the easiest solution would be to just have me create a zh.valtio.dev subdomain and point it to that vercel app. @eveningwater For that to work, you'll want to configure the root of the app on your repo to use the chinese translation instead of english. Then just link back to valitio.dev for english stuff.

[eveningwater]

@overthemike I redeployed it, the link is: https://valtio-nine.vercel.app/

[overthemike]

@overthemike I redeployed it, the link is: https://valtio-nine.vercel.app/

ok. I updated the DNS record.

[overthemike]

@eveningwater Could you also add the flag svgs next to the languages? Here are the svgs for them both:

China:

<svg className="w-4 h-4 mt-1" enable-background="new -49 141 512 512" viewBox="-49 141 512 512" xmlns="http://www.w3.org/2000/svg"><circle cx="207" cy="397" fill="#d80027" r="256"></circle><g fill="#ffda44"><path d="m91.1 296.8 22.1 68h71.5l-57.8 42.1 22.1 68-57.9-42-57.9 42 22.2-68-57.9-42.1h71.5z"></path><path d="m254.5 537.5-16.9-20.8-25 9.7 14.5-22.5-16.9-20.9 25.9 6.9 14.6-22.5 1.4 26.8 26 6.9-25.1 9.6z"></path><path d="m288.1 476.5 8-25.6-21.9-15.5 26.8-.4 7.9-25.6 8.7 25.4 26.8-.3-21.5 16 8.6 25.4-21.9-15.5z"></path><path d="m333.4 328.9-11.8 24.1 19.2 18.7-26.5-3.8-11.8 24-4.6-26.4-26.6-3.8 23.8-12.5-4.6-26.5 19.2 18.7z"></path><path d="m255.2 255.9-2 26.7 24.9 10.1-26.1 6.4-1.9 26.8-14.1-22.8-26.1 6.4 17.3-20.5-14.2-22.7 24.9 10.1z"></path></g></svg>

USA:

<svg className="w-4 h-4 mt-1 z-50" xmlns="http://www.w3.org/2000/svg" id="flag-icons-us" viewBox="0 0 640 480"><path fill="#bd3d44" d="M0 0h640v480H0"/><path stroke="#fff" stroke-width="37" d="M0 55.3h640M0 129h640M0 203h640M0 277h640M0 351h640M0 425h640"/><path fill="#192f5d" d="M0 0h364.8v258.5H0"/><marker id="us-a" markerHeight="30" markerWidth="30"><path fill="#fff" d="m14 0 9 27L0 10h28L5 27z"/></marker><path fill="none" marker-mid="url(#us-a)" d="m0 0 16 11h61 61 61 61 60L47 37h61 61 60 61L16 63h61 61 61 61 60L47 89h61 61 60 61L16 115h61 61 61 61 60L47 141h61 61 60 61L16 166h61 61 61 61 60L47 192h61 61 60 61L16 218h61 61 61 61 60z"/></svg>

[eveningwater]

@eveningwater Could you also add the flag svgs next to the languages? Here are the svgs for them both:

China:

<svg className="w-4 h-4 mt-1" enable-background="new -49 141 512 512" viewBox="-49 141 512 512" xmlns="http://www.w3.org/2000/svg"><circle cx="207" cy="397" fill="#d80027" r="256"></circle><g fill="#ffda44"><path d="m91.1 296.8 22.1 68h71.5l-57.8 42.1 22.1 68-57.9-42-57.9 42 22.2-68-57.9-42.1h71.5z"></path><path d="m254.5 537.5-16.9-20.8-25 9.7 14.5-22.5-16.9-20.9 25.9 6.9 14.6-22.5 1.4 26.8 26 6.9-25.1 9.6z"></path><path d="m288.1 476.5 8-25.6-21.9-15.5 26.8-.4 7.9-25.6 8.7 25.4 26.8-.3-21.5 16 8.6 25.4-21.9-15.5z"></path><path d="m333.4 328.9-11.8 24.1 19.2 18.7-26.5-3.8-11.8 24-4.6-26.4-26.6-3.8 23.8-12.5-4.6-26.5 19.2 18.7z"></path><path d="m255.2 255.9-2 26.7 24.9 10.1-26.1 6.4-1.9 26.8-14.1-22.8-26.1 6.4 17.3-20.5-14.2-22.7 24.9 10.1z"></path></g></svg>

USA:

<svg className="w-4 h-4 mt-1 z-50" xmlns="http://www.w3.org/2000/svg" id="flag-icons-us" viewBox="0 0 640 480"><path fill="#bd3d44" d="M0 0h640v480H0"/><path stroke="#fff" stroke-width="37" d="M0 55.3h640M0 129h640M0 203h640M0 277h640M0 351h640M0 425h640"/><path fill="#192f5d" d="M0 0h364.8v258.5H0"/><marker id="us-a" markerHeight="30" markerWidth="30"><path fill="#fff" d="m14 0 9 27L0 10h28L5 27z"/></marker><path fill="none" marker-mid="url(#us-a)" d="m0 0 16 11h61 61 61 61 60L47 37h61 61 60 61L16 63h61 61 61 61 60L47 89h61 61 60 61L16 115h61 61 61 61 60L47 141h61 61 60 61L16 166h61 61 61 61 60L47 192h61 61 60 61L16 218h61 61 61 61 60z"/></svg>

ok, I'll adjust it.

[eveningwater]

@overthemike @dai-shi All changes have been completed, please review again.

[pkg-pr-new[bot]]

More templates

• counter
• editor-proxyWithHistory
• valtio-photo-booth-demo
• starter

npm i https://pkg.pr.new/valtio@1150

commit: 1d4a9b3

[dai-shi]

Is this intentional? No "Languages" menu in this screen size.

https://github.com/user-attachments/assets/e29d38bb-8071-4fc4-9b60-bde2e8c873dc

[eveningwater]

Is this intentional? No "Languages" menu in this screen size.

Screen.Recording.2025-08-15.at.18.47.28.mov

@dai-shi The performance of the mobile and PC versions is inconsistent. The mobile version has an extra menu that jumps to the Chinese document instead of switching languages. Do you expect the mobile and PC versions to remain consistent?

[dai-shi]

I don't have much preference on it. If it's intentional, it's fine.

[dai-shi]

To be honest, I'm not sure if "Language selector" is appropriate in our case. But, I'll leave it to @overthemike.

[eveningwater]

Is this intentional? No "Languages" menu in this screen size.

Screen.Recording.2025-08-15.at.18.47.28.mov

Preview

You can check out the results by following this link.：https://valtio-git-fork-eveningwater-feature-branch-pmndrs.vercel.app/

[eveningwater]

To be honest, I'm not sure if "Language selector" is appropriate in our case. But, I'll leave it to @overthemike.

I think language switching might be better on mobile devices, and documents in other languages may be added in the future.Please allow me to think about whether I need to adjust it.

[overthemike]

As far as the "Language" label, I think the most common thing to do is to do is to have the current language 2 letter code selected with the flag next to it. See Amazon for an example.

I have some ideas on some changes for it. @eveningwater I'll clone down your fork and suggest some changes.

[eveningwater]

As far as the "Language" label, I think the most common thing to do is to do is to have the current language 2 letter code selected with the flag next to it. See Amazon for an example.

I have some ideas on some changes for it. @eveningwater I'll clone down your fork and suggest some changes.

ok,thanks.

[dai-shi]

@eveningwater Please check CI errors.

[eveningwater]

@eveningwater Please check CI errors.

ok.

[eveningwater]

• Vercel — Deployment has failed

Vercel Deployment has failed,I can't view the details to get the error,Shouldn't I check this?

[eveningwater]

• Vercel — Deployment has failed

Vercel Deployment has failed,I can't view the details to get the error,Shouldn't I check this? @dai-shi

[dai-shi]

Vercel Deployment has failed,I can't view the details to get the error,Shouldn't I check this?

I can't see it either. If it's not temporarily, there might be something wrong. You might want to test building it on your end.

[dai-shi]

I can't see it either. If it's not temporarily, there might be something wrong. You might want to test building it on your end.

Sorry, it wasn't your fault.

[dai-shi]

Is this ready for @overthemike for another review?