<div class="mol-submenu mol-submenu vacancy">
<div class="atm-heading h3">Meer over bouwreizen</div>
<div class="submenu-wrapper">
<div class="submenu-viewport">
<ul class="submenu-list">
<li class="active">
<a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Meld je aan</a>
</li>
<li class="">
<a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Planning</a>
</li>
<li class="">
<a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Sri Lanka</a>
</li>
<li class="">
<a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Marokko</a>
</li>
<li class="">
<a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Ghana</a>
</li>
<li class="">
<a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Zuid-Afrika</a>
</li>
<li class="">
<a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Noord-Afrika</a>
</li>
</ul>
</div>
<a class="inactive submenu-prev"> <i class="atm-icon text-blue far fa-chevron-left "></i>
</a>
<a class="inactive submenu-next"> <i class="atm-icon text-blue far fa-chevron-right "></i>
</a>
</div>
</div>
<div class="mol-submenu mol-submenu {{modifier}}">
{{render "@heading" heading}}
<div class="submenu-wrapper">
<div class="submenu-viewport">
<ul class="submenu-list">
{{#each items}}
<li class="{{#if active}}active{{/if}}">
{{render '@nav-link' this merge=true}}
</li>
{{/each}}
</ul>
</div>
<a class="inactive submenu-prev">{{render "@icon" iconPrev}}</a>
<a class="inactive submenu-next">{{render "@icon" iconNext}}</a>
</div>
</div>
{
"heading": {
"text": "Meer over bouwreizen",
"tag": "div",
"modifier": "h3"
},
"items": [
{
"text": "Meld je aan",
"active": true,
"href": "#"
},
{
"text": "Planning",
"href": "#"
},
{
"text": "Sri Lanka",
"href": "#"
},
{
"text": "Marokko",
"href": "#"
},
{
"text": "Ghana",
"href": "#"
},
{
"text": "Zuid-Afrika",
"href": "#"
},
{
"text": "Noord-Afrika",
"href": "#"
}
],
"iconPrev": {
"icon": "fa-chevron-left",
"style": "far",
"modifier": "text-blue"
},
"iconNext": {
"icon": "fa-chevron-right",
"style": "far",
"modifier": "text-blue"
},
"modifier": "vacancy"
}
.mol-submenu {
@apply mt-4;
.atm-heading {
@apply mb-3 text-secondary-col-1;
}
.submenu-wrapper {
@apply relative;
@apply font-display font-semibold text-md;
}
.submenu-viewport {
@apply relative overflow-x-scroll overflow-y-auto border-b;
/* -webkit-overflow-scrolling: touch;
-ms-scroll-chaining: chained;
-ms-scroll-snap-type: x mandatory;
scroll-snap-type: x mandatory;
-ms-overflow-style: none; */
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
.submenu-list {
@apply flex;
li {
@apply relative flex flex-shrink-0 items-center mr-8;
/* scroll-snap-align: start; */
.atm-slash {
@apply mx-4;
}
&:last-child {
.atm-slash {
@apply hidden;
}
}
.atm-nav-link {
@apply text-md font-normal pb-5 inline-block text-black hover:no-underline hover:text-cta;
}
&.active {
.atm-nav-link {
@apply pb-5 border-primary border-b-[3px] mt-[3px];
}
}
}
}
.submenu-prev,
.submenu-next {
@apply flex absolute transform top-1/2 -translate-y-1/2 py-2 px-3 cursor-pointer;
&.inactive {
@apply hidden;
}
}
.submenu-prev {
@apply -left-4;
background-image: linear-gradient(to right, #fff 60%, transparent);
}
.submenu-next {
@apply -right-4;
background-image: linear-gradient(to left, #fff 60%, transparent);
}
}
.mol-submenu.vacancy {
.atm-heading {
@apply hidden;
}
.submenu-wrapper {
@apply relative;
@apply font-display font-semibold text-md overflow-hidden;
}
.submenu-viewport {
@apply relative overflow-x-scroll overflow-y-auto rounded-t-xl border-none;
/* -webkit-overflow-scrolling: touch;
-ms-scroll-chaining: chained;
-ms-scroll-snap-type: x mandatory;
scroll-snap-type: x mandatory;
-ms-overflow-style: none; */
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
.submenu-list {
@apply flex bg-white;
li {
@apply relative flex flex-shrink-0 items-center mr-0;
/* scroll-snap-align: start; */
.atm-slash {
@apply mx-4;
}
&:last-child {
.atm-slash {
@apply hidden;
}
}
.atm-nav-link {
@apply text-md font-normal inline-block py-5 px-3 text-black hover:no-underline hover:text-cta h-full;
&:hover {
@apply bg-primary text-white mt-0;
}
}
&.active {
.atm-nav-link {
@apply bg-primary text-white mt-0;
}
}
}
}
.submenu-prev,
.submenu-next {
@apply flex absolute transform top-1/2 -translate-y-1/2 py-2 px-3 cursor-pointer;
&.inactive {
@apply hidden;
}
}
}
.vacancy-hero-content {
.vacancy-hero-form {
@apply rounded-xl bg-white flex items-center shadow-lg relative;
box-shadow: 0 2px 16px -6px rgba(0, 0, 0, 0.35);
}
.vacancy-hero-form .atm-form-input:first-of-type {
@apply hidden md:block border-r-2;
.form-input {
@apply rounded-l-full;
}
}
.vacancy-hero-form .atm-form-input {
@apply w-full;
}
.vacancy-hero-form input {
flex: 1;
padding: 32px 24px;
border: none;
font-size: 15px;
outline: none;
background: #f5f5f5f5;
@apply w-full;
}
.atm-form-label {
@apply left-6;
}
/* .atm-form-input {
.form-input {
@apply bg-gray-50 border-0 h-12;
}
.atm-form-label {
@apply text-black;
}
} */
}
(function () {
"use strict";
var submenus = document.querySelectorAll(".mol-submenu");
submenus.forEach((el, i) => {
var viewport = submenus[i].querySelector(".submenu-viewport");
var list = submenus[i].querySelector(".submenu-list");
var prevLink = submenus[i].querySelector(".submenu-prev");
var nextLink = submenus[i].querySelector(".submenu-next");
prevLink.addEventListener("click", function (e) {
viewportScrollTo(-100);
});
nextLink.addEventListener("click", (event) => {
viewportScrollTo(100);
});
viewport.addEventListener("scroll", function (e) {
var x = this.scrollLeft;
var w = this.scrollWidth - this.offsetWidth;
prevLink.classList.toggle("inactive", x <= 0);
nextLink.classList.toggle("inactive", x >= w);
});
window.addEventListener("load", viewportRecalculate);
window.addEventListener("resize", viewportRecalculate);
function viewportScrollTo(scrollDiff) {
viewport.scrollTo({
left: viewport.scrollLeft + scrollDiff,
behavior: "smooth",
});
}
function viewportRecalculate() {
var lw = list.offsetWidth;
var vw = viewport.scrollWidth;
prevLink.classList.toggle("inactive", lw >= vw);
nextLink.classList.toggle("inactive", lw >= vw);
viewport.dispatchEvent(new Event("scroll"));
}
});
})();
No notes defined.