<div class='org-navigation' id="">
<div class="nav-left">
<div class="selector-wrapper">
<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>
<nav class="mol-header-mobile-nav">
<ul class="-active">
<li class="active">
<div class="atm-nav-link" data-nav-trigger="0">
Opdrachtgevers met extra text
<i class="atm-icon far fa-chevron-right fa-xs "></i>
</div>
</li>
<li class="">
<a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Schoonmaak</a>
</li>
<li class="">
<div class="atm-nav-link" data-nav-trigger="2">
Branches
<i class="atm-icon far fa-chevron-right fa-xs "></i>
</div>
</li>
<li class="">
<a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Over</a>
</li>
<li class="">
<a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Nieuws uit het niets</a>
</li>
<li class="">
<a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Vacatures</a>
</li>
</ul>
<ul data-nav="0">
<li class="subitems-meta">
<button class='subitems-back'>
<i class='fal fa-chevron-left'></i>
Back
</button>
<span>Opdrachtgevers met extra text</span>
</li>
<li><a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Mijn project</a>
</li>
<li><a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Bouwreizen</a>
</li>
<li><a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Partners</a>
</li>
<li><a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Blog</a>
</li>
</ul>
<ul data-nav="2">
<li class="subitems-meta">
<button class='subitems-back'>
<i class='fal fa-chevron-left'></i>
Back
</button>
<span>Branches</span>
</li>
<li><a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Mijn project</a>
</li>
<li><a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Bouwreizen</a>
</li>
<li><a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Partners</a>
</li>
<li><a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Blog</a>
</li>
</ul>
</nav>
<div class='sub-nav'>
<div class="mol-work-cta">
<h2 class="atm-heading ">Wanna work together?</h2>
<h3 class="atm-heading ">let's talk</h3>
<a class="atm-button atm-button-secondary button-md ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Tell us more</span>
<i class="atm-icon far fa-long-arrow-right "></i>
<span class="button-underline"></span>
</span>
</div>
</a>
</div>
<ul>
<li>
<a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">Careers</a>
</li>
<li>
<a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">Contact</a>
</li>
</ul>
</div>
</div>
</div>
<div class='org-navigation' id="{{modifier}}">
<div class="nav-left">
<div class="selector-wrapper">
{{render '@identifier'}}
{{render '@language-select'}}
</div>
{{render '@header-mobile-nav'}}
<div class='sub-nav'>
{{render '@work-cta'}}
<ul>
{{#each sub_navigation}}
<li>
{{render '@link' this merge=true}}
</li>
{{/each}}
</ul>
</div>
</div>
</div>
{
"logoSrc": "/assets/img/logo_vebego.svg",
"logoAlt": "Vebego Logo",
"navigation": [
{
"title": "My project",
"url": "#"
},
{
"title": "Building trips",
"navigation": [
{
"title": "Sri Lanka",
"url": "#"
},
{
"title": "Marocco",
"navigation": [
{
"title": "Marrakesh",
"url": "#"
},
{
"title": "Casablanca",
"url": "#"
},
{
"title": "Rabat",
"url": "#"
}
]
},
{
"title": "Ghana",
"url": "#"
},
{
"title": "South Africa",
"url": "#"
},
{
"title": "Build with us!",
"url": "#"
}
]
},
{
"title": "Partners",
"url": "#"
},
{
"title": "News",
"url": "#"
},
{
"title": "About Us",
"url": "#"
}
],
"sub_navigation": [
{
"text": "Careers",
"url": "#"
},
{
"text": "Contact",
"url": "#"
}
],
"cta": {
"text": "Tell us more",
"iconLeft": true
}
}
#org-navigation-default{
.fa-arrow-right {
@apply hidden;
}
}
.org-header--active {
.header-container {
@apply fixed z-[99999];
}
}
.org-navigation {
@apply bg-white md:bg-[transparent] pt-24 md:pt-0 h-screen w-full grid grid-cols-1 auto-rows-auto justify-between lg:items-center lg:pr-0 z-[9999];
.top {
@apply grid-rows-1 flex h-12 px-8 w-full justify-between space-x-4 md:space-x-0 lg:absolute lg:col-span-2 lg:top-7 lg:z-50;
.search {
@apply relative h-full flex-1 md:hidden;
input {
@apply rounded-full w-full h-full border-0 bg-gray-50;
}
> div {
@apply absolute bg-white top-1.5 right-1.5 w-9 h-9 rounded-full flex justify-center items-center;
}
i {
@apply text-sm text-black;
}
}
.logo {
@apply hidden md:flex items-center;
img {
@apply w-32 h-auto lg:w-40;
}
}
}
.nav-left{
@apply md:pt-24 md:col-span-2 px-4 lg:px-8 grid h-full bg-white;
grid-template-rows: 1fr;
@media (max-width: 768px) {
grid-template-rows: max-content 1fr max-content;
}
.selector-wrapper{
@apply flex justify-end min-h-[3rem] md:hidden md:mb-16;
}
.selector {
.selector-sub{
@apply mt-0;
}
}
.sub-nav{
@apply self-end;
}
}
.sub-nav {
@apply flex lg:flex lg:items-end md:pb-10 gap-8;
@apply lg:row-start-3;
.mol-work-cta{
@apply flex-[2]
}
>ul{
@apply flex-1 flex flex-col gap-4;
}
h2.atm-heading{
@apply text-h5 mb-2;
}
h3.atm-heading{
@apply text-h6 m-0;
}
.atm-button {
@apply mt-4;
}
}
@media (max-height: 680px) {
.atm-nav-link {
@apply text-lg;
}
}
}
.org-header--active {
.header-container {
@apply fixed z-[99999];
}
}
(function () {
'use strict';
let prevListItems = [];
const deepNavHeader = document.querySelector('.deep-nav');
function buildNav(navItems) {
const currentNav = document.querySelector('.nav-items ul');
prevListItems = [];
currentNav.querySelectorAll('li').forEach(function (li) {
let currentNavItem = {
title: li.innerText,
};
if (li.querySelector('a')) {
currentNavItem.url = li.querySelector('a').href;
}
if (li.querySelector('[data-deepnav]')) {
currentNavItem.navigation =
li.querySelector('[data-deepnav]').dataset.deepnav;
}
prevListItems.push(currentNavItem);
});
currentNav.innerHTML = '';
navItems.forEach(function (navItem) {
const li = document.createElement('li');
if (navItem.url) {
const a = document.createElement('a');
a.innerText = navItem.title;
a.href = navItem.url;
li.appendChild(a);
}
if (navItem.navigation) {
const div = document.createElement('div');
div.classList.add('cursor-pointer');
div.dataset.deepnav = navItem.navigation;
const span = document.createElement('span');
span.innerText = navItem.title;
const i = document.createElement('i');
i.classList.add('fa');
i.classList.add('fa-chevron-right');
span.appendChild(i);
div.appendChild(span);
li.appendChild(div);
}
currentNav.appendChild(li);
});
}
document.querySelectorAll('[data-deepnav]').forEach(function (el) {
el.addEventListener('click', function (e) {
const navItems = JSON.parse(e.currentTarget.dataset.deepnav);
deepNavHeader.classList.add('-active');
deepNavHeader.querySelector('.deep-nav-title').innerText =
e.currentTarget.querySelector('span').innerText;
buildNav(navItems);
});
});
document
.querySelector('.deep-nav-btn')
.addEventListener('click', function (e) {
e.preventDefault();
deepNavHeader.classList.remove('-active');
buildNav(prevListItems);
});
})();
No notes defined.