Better language dropdown

[ericswpark]

Right now the language menus in the navigation bar redirect the user to the main page of the website. Would it be possible to implement the language switcher as a dropdown instead so the user can switch between the different languages of a given page? Preferably, the language switch should redirect to the same page instead of redirecting back to the main page.

Sort of like the language switcher at the bottom of 1Password's website:

[lxndrblz]

@ericswpark Just to confirm. You want to avoid being defaulted back to the main page and basically stay on the same page even if you are switch languages?

[ericswpark]

@lxndrblz Yup! It would be great if anatole would stay on the same page, but change to the new language. The switcher should only default to the main page if the current page does not have a translation to the selected language.

[lxndrblz]

This dicussion should be a good starting point. I hope to find some time to play around with it on the weekend.

[a0m0rajab]

this discussion could help too.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[ericswpark]

@lxndrblz can we re-open this issue?

I've tried implementing the dropdown myself, but I'm not really good with web development. So far I've managed to move the language dropdown to the right of the navbar, next to the theme switcher button. The dropdown now correctly moves back and forth between translated pages instead of redirecting to the homepage, and only shows up if the current page has a translation available.

All it needs is proper CSS styling so that it shows up as an actual dropdown, but I'm not very good with CSS. Can you please take a look if you have time? It's the commit on the master branch: https://github.com/ericswpark/anatole Thanks!

[ericswpark]

Currently shows up like this (w/o CSS styling)

On a page with only one language version available:

[lxndrblz]

@ericswpark Would you mind doing a PR and I will have a look at it?

[ericswpark]

Sure, will submit it right now.

[lxndrblz]

@ericswpark I will check it out and report back. The CSS shouldn't be too tricky with the new setup. It might take me a few days until I can test it as I am really swamped with work right now.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[ericswpark]

Still active, replying so the bot won't close the issue.

[ericswpark]

@lxndrblz I've pushed another attempt at the dropdown, this time by using click instead of hover to address the previous concern of usability on mobile. So far it works OK, except for a visual bug on mobile where the dropdown triangle will show up until dismissed by clicking. I've experimented with the CSS values but I'm not sure how to fix this.

Other problems with the initial draft PR are outlined in the top post in the PR itself.

[lxndrblz]

@ericswpark Thanks. I'll check it out and try to squash that bug!

[lxndrblz]

@ericswpark I've just pushed another update:

It's almost ready, I am currently thinking about adding a tiny animation on dropdown and want to increase the height slightly to match the other menu items.

[lxndrblz]

@ericswpark I've just updated the branch with a few more commits. The dropdown functionality is now at a stage I am happy with both in terms of looks and functionality. I would love to hear your feedback!

[ericswpark]

@lxndrblz I just tried the updated branch and I really like the new implementation you made! Just two questions:

• Is the current language showing up in the dropdown intentional? In my implementation it only shows languages to switch to, to avoid confusion. Now the current language shows up as well which doesn't serve any function and takes up screen space on mobile.
• For the navbar, is there a configuration key to move the language switcher to the right of the page (next to the theme switcher button) when on a desktop? Mobile looks fine. I think for modifying the look and feel of the page placing the icons on the right-hand side is more "seamless" experience IMHO.

Can't wait for this branch to get merged. Thank you so much for all the work you've put into this!

[lxndrblz]

@ericswpark Thanks for testing it. 👍

Regarding your remarks:

1. Yes that was intentional, because otherwise there is an occasion, where the language switcher occurs even the page only exists in a single language. However, no language can be selected even though the dropdown appears. Do you have a better idea of working around that problem?
2. Well caught! I'll move it to where the theme switcher is currently located.

Thanks for your help as well!

[ericswpark]

@lxndrblz regarding point 1, my previous implementation just hid the entire language switching option if a given page did not have any translations. I checked your implementation and it was nearly there too but it was missing a .IsTranslated check, which was why the dropdown was showing even if the page was not translated.

Actually the and in this if statement doesn't make much sense without it:

{{ if and .Site.IsMultiLingual }}

I just changed some of the conditionals back to the initial implementation and the dropdown is correctly removed on pages with no translations. Check my branch here: https://github.com/ericswpark/anatole/tree/languagedropdown in particular this commit: ericswpark@88c5412

[lxndrblz]

@ericswpark I'd merged the branch earlier and came back to thank you for your support!

If you want to support me with the portfolio issue, feel free to open a PR towards the portfolio branch, or comment on the issue.