Moved language menu to top nav

[milinddethe15]

Description

Moved language menu to top navigation bar for easily switch between languages
Preview link: https://deploy-preview-15565--preliminary-istio.netlify.app/

Reviewers

• Ambient
• Docs
• Installation
• Networking
• Performance and Scalability
• Extensions and Telemetry
• Security
• Test and Release
• User Experience
• Developer Infrastructure
• Localization/Translation

[istio-testing]

Hi @milinddethe15. Thanks for your PR.

I'm waiting for a istio member to verify that this patch is reasonable to test. If it is, they should reply with /ok-to-test on its own line. Until that is done, I will not automatically test new commits in this PR, but the usual testing commands by org members will still work. Regular contributors should join the org to skip this step.

Once the patch is verified, the new status will be reflected by the ok-to-test label.

I understand the commands that are listed here.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

[craigbox]

/ok-to-test

[craigbox]

Thanks for the contribution! I'm not 100% sure it's something we want to go with. My initial thoughts:

• we have limited the number of things in this header for width:

• the header "English" doesn't immediately suggest to me this is a language drop down

• I might ask our zh-cn audience if they think this is useful first?

[milinddethe15]

Hi @craigbox

• the header "English" doesn't immediately suggest to me this is a language drop down

I have changed language menu title to en/关于, much clearer

• I might ask our zh-cn audience if they think this is useful first?

#11554 is open for this.
let me know once it’s finalized

• we have limited the number of things in this header for width

maybe a seperate dropdown, outside the main navigation bar, can be created.

[craigbox]

Hey @milinddethe15, could you (a) introduce UK (b) use the "language" icon SVG from https://clarity.design/documentation/icons/shapes ?

[craigbox]

merging master brought UK language in also - now just to change the icon (and remove dropdown indicator) please!

[milinddethe15]

For some reason SVG is not rendered properly. Can we use SVG icon from some another source?

[craigbox]

Set the stroke-width to 0px in an svg.language-outline section in assets/sass/misc/_header.scss.

[craigbox]

Changing that breakpoint could have other repercussions.
Did you test a few other pages?

[milinddethe15]

I tested few of the pages in all supported languages and it looks fine.

[craigbox]

The breakpoint was set under 1024px as that's a common screen width. Now, people with that width browser (iPads) will use the hamburger menu version.

Which raises a bigger concern.
You can't use this menu in the hamburger menu.

[milinddethe15]

Now, people with that width browser (iPads) will use the hamburger menu version.

For iPads, hamburger menu is already in use.

You can't use this menu in the hamburger menu.

WDYM? The menu seems to work fine.

[craigbox]

I see something different:

But either way, it's tight, and we could improve this by changing to "Docs" at short width.

Regarding the clicking, on istio.io, if I set my width to iPhone, I get a working expando:

At 1024px width, neither expander works on https://deploy-preview-15565--preliminary-istio.netlify.app/. If you change to a smaller width it starts working again.

(Design note: also needs a drop-down menu caret, and a blue separator line between "Docs" and language.)