Vebego Component Library

Header Utils 

<nav class="mol-header-utils">
    <ul>
        <li class="utils-desktop">
            <a class="atm-nav-link " href="#" title="" aria-label="" target="">Werken bij Hago Zorg</a>

            <span class="atm-slash  " style="width: 1px; height: 30px;"></span>
        </li>
        <li class="utils-desktop">
            <a class="mol-search-toggle">
                <span class="text">Zoeken</span>
                <span class="atm-icon  far fa-search   "></span>
            </a>

            <span class="atm-slash  " style="width: 1px; height: 30px;"></span>
        </li>
        <li class="utils-mobile">
            <a id="mol-mobile-toggle">
                <span class="open">
                    <span class="atm-icon  far fa-bars   fa-fw"></span>
                </span>
                <span class="close">
                    <span class="atm-icon  far fa-times   fa-fw"></span>
                </span>
            </a>

            <span class="atm-slash  " style="width: 1px; height: 30px;"></span>
        </li>
        <li class="utils-desktop">
            <div class='mol-language-select'>
                <input type='checkbox' id='lang-select-checkbox' class='lang-select-checkbox' />
                <label for='lang-select-checkbox' class='lang-select-label'>
                    <span class='text'>NL</span>
                    <span class="atm-icon  far fa-chevron-down  fa-xs "></span>
                </label>
                <div class='lang-select-sub'>
                    <ul>
                        <li><a class="atm-nav-link " href="#" title="" aria-label="" target="">EN</a>
                        </li>
                        <li><a class="atm-nav-link " href="#" title="" aria-label="" target="">DE</a>
                        </li>
                        <li><a class="atm-nav-link " href="#" title="" aria-label="" target="">FR</a>
                        </li>
                    </ul>
                </div>
            </div>

            <span class="atm-slash  " style="width: 1px; height: 30px;"></span>
        </li>
    </ul>
</nav>
 
<nav class="mol-header-utils">
    <ul>
        {{#each items}}
            <li class="utils-desktop">
                {{render '@nav-link' this}}
                {{render '@slash'}}
            </li>
        {{/each}}
        {{#if showSearch}}
            <li class="utils-desktop">
                {{render '@search-toggle'}}
                {{render '@slash'}}
            </li>
        {{/if}}
        <li class="utils-mobile">
            {{render '@mobile-toggle'}}
            {{render '@slash'}}
        </li>
        {{#if showLanguageSelect}}
            <li class="utils-desktop">
                {{render '@language-select'}}
                {{render '@slash'}}
            </li>
        {{/if}}
    </ul>
</nav>
 
{
  "items": [
    {
      "text": "Werken bij Hago Zorg",
      "href": "#"
    }
  ],
  "showSearch": true,
  "showLanguageSelect": true
}
  • Content: 
    .mol-header-utils {
    > ul {
        @apply flex;

        .last {
            .atm-slash {
                @apply hidden;
            }
        }

        > li {
            @apply flex items-center;

            > .atm-nav-link {
                @apply font-normal no-underline;
            }

            > .atm-slash {
                @apply mx-4;
            }
        }

        .utils-desktop {
            @apply hidden md:flex;
        }

        .utils-mobile {
            @apply md:hidden;
        }
    }
}
  • URL: /components/raw/header-utils/header-utils.css
  • Filesystem Path: src\components\03-molecules\header-utils\header-utils.css
  • Size: 553 Bytes
  • Content: 
    (function () {

    'use strict';

    var listItems = $('.mol-header-utils li');

    listItems.each(function (i, li) {
        var $item = $(li);

        if ($item.css('display') == 'flex') {
            $item.addClass('active');
        }
    });

    $('.mol-header-utils .active').last().addClass('last');

    document.body
        .querySelectorAll('.mol-header-utils ul li .atm-nav-link ')
        .forEach((e) => {
            const text = e.innerText.replace(/(.*?\s.*?\s)/g, '$1' + '\n');
            e.innerText = text;
        });
})();
  • URL: /components/raw/header-utils/header-utils.js
  • Filesystem Path: src\components\03-molecules\header-utils\header-utils.js
  • Size: 572 Bytes

No notes defined.