<div class="c-language-switcher">
<a href="" class="c-language-switcher__action ">it</a>
<a href="" class="c-language-switcher__action ">en</a>
</div>
{#
This component is based on Site Switcher Craft Plugin
Doc here: https://github.com/doublesecretagency/craft-siteswitcher/blob/v2/README.md
#}
{% set element = (category ?? entry ?? null) %}
{% if entry is defined %}
{# Get the canonical entry #}
{% set canonicalEntry = entry.getCanonical() %}
{# Get all translations of the canonical entry #}
{% set translations = canonicalEntry.getLocalized().all() %}
{% set hasTranslations = translations | length > 0 %}
{% else %}
{% set hasTranslations = true %}
{% endif %}
{% set languages = [
{ handle: "default", text: "it"},
{ handle: "tangibleEn", text: "en"}
] %}
{% if hasTranslations %}
<div class="c-language-switcher{% if modifier is defined %} {{ modifier }}{% endif %}">
{% for language in languages %}
{% set isCurrentSite = (language.text == currentSite.language) %}
<a
href="{% if not isFractal is defined %}{{ siteSwitcher(language.handle, element) }}{% endif %}" class="c-language-switcher__action {{ isCurrentSite ? 'is-active' }}"
>{{ language.text }}</a>
{% endfor %}
</div>
{% endif %}
{
"isFractal": true
}
.c-language-switcher {
display: inline-flex;
background-color: useHSL(--grey);
border-radius: remify(50px);
}
.c-language-switcher__action {
display: flex;
align-items: center;
justify-content: center;
border-radius: remify(50px);
padding: spacing(space-8);
text-transform: uppercase;
color: useHSL(--primary-100);
background-color: useHSL(--grey);
text-decoration: none;
width: remify(40px);
aspect-ratio: 1 / 1;
}
.c-language-switcher__action.is-active {
background-color: useHSL(--primary-100);
color: useHSL(--base-100);
.c-off-canvas-nav & {
background-color: useHSL(--highlight-100);
color: useHSL(--primary-100);
}
}
No notes defined.