Freie Grundschule Pfefferwerk - Frontend Design

Menu Language Switch 

<div class="c-language-switch">
    <!--
        @int:
        no JS needed, checkbox hack for dropdown menu
    -->
    <div class="c-language-switch__language is-active c-button c-button--primary">DE<span class="u-accessibility">Deutsch</span></div>

    <div class="c-language-switch__dropdown c-dropdown">
        <input type="checkbox" id="c-language-switch-checkbox" class="c-language-switch__checkbox c-dropdown__checkbox">

        <label class="c-language-switch__label c-dropdown__trigger c-button c-button--ghost c-button--icon" for="c-language-switch-checkbox">
            <span class="u-accessibility">Sprachmenü öffnen</span>
            <svg width="32px" height="32px" viewBox="0 0 32 32" class="o-icons o-icons--arrow-top" aria-hidden="true">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/icons/sprite/sprite.svg#arrow-top"></use>
</svg>

        </label>

        <nav class="c-language-switch__menu c-dropdown__menu">
            <ul class="c-language-switch__list">
                <li class="c-language-switch__item">
                    <span class="c-language-switch__link is-active">DE</span>
                    <span class="u-accessibility">Deutsch</span>
                </li>
                <li class="c-language-switch__item">
                    <a href="#" class="c-language-switch__link">EN</a>
                    <span class="u-accessibility">Englisch</span>
                </li>
                <li class="c-language-switch__item">
                    <a href="#" class="c-language-switch__link">PL</a>
                    <span class="u-accessibility">Polnisch</span>
                </li>
            </ul>
        </nav>
    </div>

</div>
 
<div class="c-language-switch">
    <!--
        @int:
        no JS needed, checkbox hack for dropdown menu
    -->
    <div class="c-language-switch__language is-active c-button c-button--primary">{{langActive}}<span class="u-accessibility">{{langAccess}}</span></div>

    <div class="c-language-switch__dropdown c-dropdown">
        <input
            type="checkbox"
            id="c-language-switch-checkbox"
            class="c-language-switch__checkbox c-dropdown__checkbox">

        <label class="c-language-switch__label c-dropdown__trigger c-button c-button--ghost c-button--icon" for="c-language-switch-checkbox">
            <span class="u-accessibility">Sprachmenü öffnen</span>
            {{render '@icons--arrow-top'}}
        </label>

        <nav class="c-language-switch__menu c-dropdown__menu">
            <ul class="c-language-switch__list">
                {{#each langItems}}
                    <li class="c-language-switch__item">
                        {{#if langActive}}
                            <span class="c-language-switch__link is-active">{{langActive}}</span>
                            <span class="u-accessibility">{{langAccess}}</span>
                        {{else}}
                            <a href="#" class="c-language-switch__link">{{lang}}</a>
                            <span class="u-accessibility">{{langAccess}}</span>
                        {{/if}}
                    </li>
                {{/each}}
            </ul>
        </nav>
    </div>

</div>
 
{
  "langActive": "DE",
  "langAccess": "Deutsch",
  "langItems": [
    {
      "isActive": true,
      "langActive": "DE",
      "langAccess": "Deutsch"
    },
    {
      "isActive": null,
      "lang": "EN",
      "langAccess": "Englisch"
    },
    {
      "isActive": null,
      "lang": "PL",
      "langAccess": "Polnisch"
    }
  ]
}

There are no notes for this item.