<nav class='mol-header-utils'>
<div class='mol-identifier selector'>
<div class='selector-label selector-wrapper'>
<span class='text'>Groen</span>
<button> <i class="atm-icon far fa-chevron-down fa-xs "></i>
</button>
</div>
<div class='selector-sub'>
<ul>
<li class="selector-item selector-item--facility-solutions">
<span>/</span>
<a class="atm-nav-link " href="#" title="" aria-label="" target="">Facility solutions</a>
</li>
<li class="selector-item selector-item--cleaning-services">
<span>/</span>
<a class="atm-nav-link " href="#" title="" aria-label="" target="">Cleaning services</a>
</li>
<li class="selector-item selector-item--zorg">
<span>/</span>
<a class="atm-nav-link " href="#" title="" aria-label="" target="">Zorg</a>
</li>
<li class="selector-item selector-item--landscaping-services">
<span>/</span>
<a class="atm-nav-link " href="#" title="" aria-label="" target="">Landscaping services</a>
</li>
</ul>
</div>
</div>
<div class='mol-language-select selector'>
<div class='selector-label selector-wrapper'>
<span class='text'>NL</span>
<button> <i class="atm-icon far fa-chevron-down fa-xs "></i>
</button>
</div>
<div class='selector-sub'>
<ul>
<li class="selector-item selector-item--de">
<span>/</span>
<a class="atm-nav-link " href="#" title="" aria-label="" target="">DE</a>
</li>
<li class="selector-item selector-item--fr">
<span>/</span>
<a class="atm-nav-link " href="#" title="" aria-label="" target="">FR</a>
</li>
<li class="selector-item selector-item--en">
<span>/</span>
<a class="atm-nav-link " href="#" title="" aria-label="" target="">EN</a>
</li>
</ul>
</div>
</div>
<div class='utils-search'>
<button class="atm-button atm-button-primary utils-search-toggle button-icon-only ">
<div class="button-content-wrapper">
<span class="button-content">
<i class="atm-icon far fa-search fa-lg fa-fw"></i>
</span>
</div>
</button>
</div>
<div class="utils-cta">
<a class="atm-button atm-button-primary button-md no-icon ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button</span>
<i class="atm-icon fal fa-arrow-right "></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
</div>
<button class='primary' id="header-nav-open-menu">
<span class='text-closed'>Menu</span>
<span class='text-open'>Sluiten</span>
<span class='icon'></span>
</button>
</nav>
<nav class='mol-header-utils'>
{{render '@identifier'}}
{{render '@language-select'}}
<div class='utils-search'>
{{render '@button-primary--icon-only-md' button merge=true}}
</div>
<div class="utils-cta">
{{render '@button-primary'}}
</div>
<button class='primary' id="header-nav-open-menu">
<span class='text-closed'>Menu</span>
<span class='text-open'>Sluiten</span>
<span class='icon'></span>
</button>
</nav>
{
"showSearch": true,
"inputField": {
"input": {
"label": {
"text": "Zoeken"
}
}
},
"button": {
"element": "button",
"modifier": "utils-search-toggle",
"icon": {
"style": "far",
"icon": "fa-search",
"size": "fa-lg"
},
"showTriangle": false
}
}
.mol-header-utils {
@apply gap-2 lg:w-auto cursor-pointer;
@apply flex items-center;
@apply p-1 md:backdrop-blur-sm gap-2 rounded-full bg-white bg-opacity-90;
.utils-search {
@apply flex bg-white border-4 border-gray-100 rounded-full w-12 h-12 items-center justify-center relative;
.atm-button {
@apply rounded-none text-center p-0 mr-0 text-[1rem] leading-4 bg-[transparent];
.atm-icon {
@apply text-black text-[1rem] leading-4 overflow-hidden;
&:before {
@apply transform transition-transform;
}
&:hover {
&:before {
@apply scale-[0.85];
}
}
}
.atm-button-secondary {
.button-content {
@apply w-10 h-10 bg-white rounded-full flex items-center justify-center mb-0 pl-0 pr-0;
@apply cursor-pointer;
}
.button-underline {
@apply hidden;
}
}
}
}
.utils-cta{
@apply hidden lg:block;
.atm-button-primary{
@apply block;
}
}
button.primary {
@apply font-display flex items-center h-12;
@apply bg-secondary-col-1 text-white px-5 rounded-full transition-all;
transition: all 0.2s cubic-bezier(0.1, 0.82, 0.76, 0.965);
> * {
@apply pointer-events-none;
}
&:hover {
@apply border-opacity-80;
span.icon {
&::after {
width: 10px;
}
&::before {
width: 19px;
}
}
}
.org-header--active & {
@apply justify-center h-12 w-12 sm:w-auto p-0 sm:px-5;
}
span.text-closed {
.org-header--active & {
@apply hidden;
}
}
span.text-open {
@apply hidden;
.org-header--active & {
@apply hidden sm:inline-block;
}
}
span.icon {
@apply relative w-4 h-4 ml-2 flex justify-center items-center;
transition: all 0.2s cubic-bezier(0.1, 0.82, 0.76, 0.965);
&::after,
&::before {
content: '';
height: 2px;
width: 13px;
@apply bg-white absolute left-0 rounded-sm transition-transform;
transform: translateY(-3px);
transform-origin: center;
transition: all 0.2s cubic-bezier(0.1, 0.82, 0.76, 0.965);
}
&::after {
width: 15px;
transform: translateY(3px);
}
.org-header--active & {
@apply m-0 sm:ml-2;
&::after,
&::before {
width: 15px;
}
&::before {
transform: rotate(45deg);
}
&::after {
transform: rotate(-45deg);
}
}
}
}
.selector {
@apply hidden lg:block ;
.selector-label{
@apply px-2;
}
}
#header-nav-open-menu {
@apply lg:hidden;
}
}
(function () {
'use strict';
const menuToggle = document.getElementById('header-nav-open-menu');
const defaultNav = document.getElementById('org-navigation-default');
const alertToggle = document.querySelector('.alert');
const logo = document.getElementById('header-logo');
const logoAlternate = document.getElementById('header-logo-alternate');
if (menuToggle) {
menuToggle.addEventListener('click', (e) => {
e.preventDefault();
const header = e.currentTarget.closest('.org-header');
const headerDiv = document.querySelector('.vebego-header');
// Toggle between .header-nav--active and .header-nav--closed on menuToggle
if (menuToggle.classList.contains('header-nav--active')) {
menuToggle.classList.remove('header-nav--active');
menuToggle.classList.add('header-nav--closed');
} else {
menuToggle.classList.remove('header-nav--closed');
menuToggle.classList.add('header-nav--active');
}
if (headerDiv) {
headerDiv.classList.toggle('org-header--active');
if (headerDiv.classList.contains('org-header--active')) {
headerDiv.classList.remove('org-header--closed');
} else {
headerDiv.classList.add('org-header--closed');
}
document
.querySelector('body')
.classList.toggle('overflow-hidden');
if (logoAlternate) {
logo.classList.toggle('hidden');
logoAlternate.classList.toggle('hidden');
}
setTimeout(function () {
if (
document
.querySelector('.nav-left')
.classList.contains('slide-in')
) {
document
.querySelector('.nav-left')
.classList.remove('slide-in');
} else {
document
.querySelector('.nav-left')
.classList.add('slide-in');
}
}, 1);
}
if (header) {
header.classList.toggle('org-header--active');
if (header.classList.contains('org-header--active')) {
header.classList.remove('org-header--closed');
} else {
header.classList.add('org-header--closed');
}
}
if (alertToggle) {
alertToggle.classList.toggle('alert--active');
}
if (defaultNav) {
header.classList.toggle('org-header--default-nav');
}
});
}
})();
No notes defined.