feat: allow switching to other languages in gcds-header

[radmorecameron]

Prerequisites | Prérequis

• [x] I've read the Contributing Guidelines. | J’ai lu les Lignes directrices sur les contributions.
• [x] I agree to follow the Code of Conduct. | J’accepte de me conformer au Code de conduite.
• [x] I've searched for existing issues that already report this problem, without success. | J’ai vérifié parmi les tickets (issues) existants que ce sujet n’avait pas déjà été soumis.

Describe the feature request. | Décrivez la fonctionnalité demandée

It'd be useful if we could specify more languages/urls in the gcds-heading and switch it to a dropdown instead of a toggle link if more languages are specified

Describe the use case. | Décrivez les cas d’utilisation

we are hoping to adds indigenous language support to some of our pages and it'd be useful if we could specify different languages/urls for the gcds-header so a dropdown to change languages can be used instead

Describe the preferred solution. | Décrivez la solution souhaitée

Allow us to specify custom text and links for different languages that gcds-header can use

Describe all alternatives. | Décrivez toutes les solutions possibles

Allow us to specify one url for all language changing and we provide iso code and label and the iso code will be passed to the url as a query parameter

Provide related code or examples. | Fournissez du code ou des exemples pertinents

<gcds-header languages="[{label: 'Inuktitut', lang-href: 'switchlang/iku']"  skip-to-href="#" />

or

<gcds-header lang-href="switchlang" languages="[{label : 'Inuktitut', iso639-2 = 'iku'}]" skip-to-href="#" />

Add other relevant resources. | Ajoutez toute autre ressource utile

No response

[ethanWallace]

Hey @radmorecameron, thanks for the feature request.

For the time being, the gcds-header has a toggle slot that allows you to pass a custom language toggle to the header for more control. This will require some custom development on your end to create the dropdown with multiple language links.

Please see the example below with a basic preview of how this can be done:

<gcds-header skip-to-href="#">
  <div slot="toggle">
     <ul>{Custom implementation of dropdown list}</ul>
  </div>
</gcds-header>

Please reach out if you have any more questions!