codegouvfr / react-dsfr

🇫🇷 The French Government Design system React toolkit
https://react-dsfr.codegouv.studio
MIT License
403 stars 49 forks source link

Translation in Header #118

Open sylvainlg opened 1 year ago

sylvainlg commented 1 year ago

Hi

We need a translation dropdown in header for https://refugies.info/fr (we use this tool from dataesr implementation). How can we implement this with codegouvfr/react-dsfr ?

Thanks

garronej commented 1 year ago

Il sill preprod we have it as well: https://sill-preprod.lab.sspcloud.fr/

garronej commented 1 year ago

https://github.com/codegouvfr/sill-web/blob/79849644649ad76b127b57759e4098570da83cc8/src/ui/shared/Header.tsx#L75-L79

https://github.com/codegouvfr/sill-web/blob/main/src/ui/shared/LanguageSelector.tsx

We have to reporte it to this repo but you can copy paste it in the meantime

MustThinkOfAName commented 6 months ago

@garronej Hello! After some quick testing I wanted to point out that apparently the locale selector works great in desktop mode but the drop-down menu is not triggered when clicked in mobile mode. Thank you :)

garronej commented 6 months ago

😢 Yes indeed

MustThinkOfAName commented 4 months ago

Hey guys!

I wondered if the implementation of the LanguageSelector component/fix on mobile was on your roadmap?

As for the last point, I gave it a quick glance and I believe the issue is that in your current implementation, the LanguageSelector component is treated as a quick access item.

Had the issue be simply inside the component, I'd have felt confident to try to propose an MR but as it seems to require modifying the Header component, I worry that my implementation wouldn't fit the architecture envisioned. (I could still propose something that you guys could later modify tho)