<div class="nav-desktop-wrapper">
<nav class="nav-desktop uhasselt-container">
<div class="nav-wrapper">
<div class="logo-wrapper">
<a class="logo" href="#"><img src="../../assets/img/logo_uhasselt.svg" alt=""></a>
</div>
<div class="type-utils-wrapper">
<ul class="type-nav">
<li>
<span class="icon far fa-user-graduate " aria-hidden="true"></span>
<a href="#" class="link " aria-label="" title="">
<span class="text">Voor studenten</span>
</a>
</li>
<li>
<span class="icon far fa-user-lock " aria-hidden="true"></span>
<a href="#" class="link " aria-label="" title="">
<span class="text">Voor medewerkers</span>
</a>
</li>
</ul>
<ul class="util-nav">
<li><a href="#" class="link " aria-label="" title="">
<span class="text">Contact</span>
<span class="icon far fa-external-link " aria-hidden="true"></span>
</a>
</li>
<li><a href="#" class="link " aria-label="" title="">
<span class="text">Wie is wie?</span>
<span class="icon far fa-external-link " aria-hidden="true"></span>
</a>
</li>
<li><a href="#" class="link " aria-label="" title="">
<span class="text">Bibliotheek</span>
<span class="icon far fa-external-link " aria-hidden="true"></span>
</a>
</li>
<li><a href="#" class="link " aria-label="" title="">
<span class="text">Vacatures</span>
</a>
</li>
<li><a href="#" class="link " aria-label="" title="">
<span class="text">English</span>
</a>
</li>
<li>Gebruiker</li>
</ul>
</div>
<div class="main-wrapper">
<ul class="page-nav">
<li class="level-1">
<input type="checkbox" id="page-nav-checkbox0" class="page-nav-checkbox">
<label for="page-nav-checkbox0" class="page-nav-label">
Info voor
<span class="icon far fa-chevron-down fa-xs " aria-hidden="true"></span>
</label>
<div class="page-nav-sub">
<ul>
<li class="level-2">
<a href="#"><span class="icon fas fa-caret-right " aria-hidden="true"></span>Toekomstige studenten</a>
</li>
<li class="level-2">
<a href="#"><span class="icon fas fa-caret-right " aria-hidden="true"></span>Studenten</a>
</li>
<li class="level-2">
<a href="#"><span class="icon fas fa-caret-right " aria-hidden="true"></span>Doctorandi</a>
</li>
<li class="level-2">
<a href="#"><span class="icon fas fa-caret-right " aria-hidden="true"></span>Alumni</a>
</li>
</ul>
</div>
</li>
<li class="level-1">
<a href="#">Studeren</a>
</li>
<li class="level-1">
<a href="#">Onderzoek</a>
</li>
<li class="level-1">
<a href="#">Over ons</a>
</li>
</ul>
<div class="search-field">
<span class="atm-form-input ">
<input type="text" name="input" id="input" placeholder="Zoekterm..." class="form-input" value="">
<span class="icon far fa-times form-input-error-icon" aria-hidden="true"></span>
<span class="icon far fa-check form-input-valid-icon" aria-hidden="true"></span>
</span>
<a href="#" class="button button-black button-noframe">
<span>
<span class="icon fal fa-search " aria-hidden="true"></span>
</span>
</a>
</div>
</div>
</div>
</nav>
</div>
<div class="nav-desktop-mobile">
<a class="mobile-logo" href="#"><img src="../../assets/img/logo_uhasselt.svg" alt=""></a>
<a id="nav-toggle-search" href="#nav-mobile">
<span class="icon far fa-search " aria-hidden="true"></span>
</a>
</div>
<div class="nav-desktop-wrapper">
<nav class="nav-desktop uhasselt-container">
<div class="nav-wrapper">
<div class="logo-wrapper">
<a class="logo" href="#"><img src="{{ path '/assets/img/logo_uhasselt.svg' }}" alt=""></a>
</div>
<div class="type-utils-wrapper">
<ul class="type-nav">
{{#each typeNav}}
<li>
{{#if customIcon}}
{{ render '@icon' customIcon }}
{{/if}}
{{ render '@link' this }}
</li>
{{/each}}
</ul>
<ul class="util-nav">
{{#each utilsNav}}
<li>{{ render '@link' this }}</li>
{{/each}}
<li>Gebruiker</li>
</ul>
</div>
<div class="main-wrapper">
<ul class="page-nav">
{{#each pageNav}}
{{#if subItems}}
<li class="level-1">
<input type="checkbox" id="page-nav-checkbox{{@index}}" class="page-nav-checkbox">
<label for="page-nav-checkbox{{@index}}" class="page-nav-label">
{{text}}
{{render '@icon' @root.dropdownIcon}}
</label>
<div class="page-nav-sub">
<ul>
{{#each subItems}}
<li class="level-2">
<a href="{{href}}">{{render '@icon' ../subIcon}}{{text}}</a>
</li>
{{/each}}
</ul>
</div>
</li>
{{else}}
<li class="level-1">
<a href="{{href}}">{{text}}</a>
</li>
{{/if}}
{{/each}}
</ul>
{{render '@search-field'}}
</div>
</div>
</nav>
</div>
<div class="nav-desktop-mobile">
<a class="mobile-logo" href="#"><img src="{{ path '/assets/img/logo_uhasselt.svg' }}" alt=""></a>
<a id="nav-toggle-search" href="#nav-mobile">
{{render '@icon' searchToggle}}
</a>
</div>
{
"dropdownIcon": {
"icon": "fa-chevron-down",
"style": "far",
"size": "fa-xs"
},
"searchToggle": {
"icon": "fa-search",
"style": "far"
},
"pageNav": [
{
"href": "#",
"text": "Info voor",
"subIcon": {
"icon": "fa-caret-right",
"style": "fas",
"size:": "fa-xs"
},
"subItems": [
{
"href": "#",
"text": "Toekomstige studenten"
},
{
"href": "#",
"text": "Studenten"
},
{
"href": "#",
"text": "Doctorandi"
},
{
"href": "#",
"text": "Alumni"
}
]
},
{
"href": "#",
"text": "Studeren"
},
{
"href": "#",
"text": "Onderzoek"
},
{
"href": "#",
"text": "Over ons"
}
],
"typeNav": [
{
"href": "#",
"text": "Voor studenten",
"customIcon": {
"icon": "fa-user-graduate",
"style": "far"
}
},
{
"href": "#",
"text": "Voor medewerkers",
"customIcon": {
"icon": "fa-user-lock",
"style": "far"
}
}
],
"utilsNav": [
{
"href": "#",
"text": "Contact",
"isExternal": true,
"iconData": {
"icon": "fa-external-link",
"style": "far"
}
},
{
"href": "#",
"text": "Wie is wie?",
"isExternal": true,
"iconData": {
"icon": "fa-external-link",
"style": "far"
}
},
{
"href": "#",
"text": "Bibliotheek",
"isExternal": true,
"iconData": {
"icon": "fa-external-link",
"style": "far"
}
},
{
"href": "#",
"text": "Vacatures"
},
{
"href": "#",
"text": "English"
}
],
"userNav": {
"href": "#",
"text": "Elke Willems"
}
}
.nav-desktop-wrapper {
@apply bg-white transform-gpu transition-all;
@apply border-b border-solid border-gray;
@apply hidden lg:block fixed top-0 left-0 w-full;
z-index: 150;
height: 180px;
.nav-desktop {
@apply flex flex-col justify-center h-full;
.nav-wrapper {
@apply grid;
grid-template-columns: fit-content(350px) 1fr;
grid-template-rows: fit-content(100px) 1fr;
grid-template-areas:
'logo type-utils'
'logo main';
.logo-wrapper {
grid-area: logo;
margin-right: 2rem;
.logo {
@apply inline-block;
img {
max-height: 115px;
width: auto;
}
}
}
.type-utils-wrapper {
@apply flex;
grid-area: type-utils;
ul.type-nav,
ul.util-nav {
@apply flex flex-nowrap;
@apply text-md font-normal;
li {
+ li {
@apply ml-4;
}
&.active {
a {
@apply text-red;
}
}
.link {
@apply text-black hover:text-red;
}
}
}
ul.util-nav {
margin-left: auto;
}
ul.type-nav li {
@apply flex;
@apply items-center;
span {
@apply mr-2;
}
}
}
.main-wrapper {
@apply flex items-center mt-8;
grid-area: main;
ul.page-nav {
@apply flex flex-row flex-wrap;
@apply text-lg font-medium leading-10;
@apply ml-auto;
> li.level-1 {
@apply relative;
&.active {
a {
@apply text-red;
}
}
.page-nav-checkbox {
@apply hidden;
}
.page-nav-label {
@apply px-4 py-3 cursor-pointer hover:text-red;
}
> a {
@apply mx-4 py-3 hover:text-red;
}
.page-nav-sub {
@apply absolute z-10 left-0;
@apply min-w-max py-6;
@apply opacity-0 pointer-events-none;
@apply shadow-lg bg-white;
top: 30px;
> ul {
li.level-2 {
@apply hover:bg-red hover:text-white;
> a {
@apply block px-6;
@apply hover:bg-red hover:text-white;
font-size: 1.125rem;
line-height: 1.875rem;
.icon {
@apply mr-2;
}
}
}
}
}
.page-nav-checkbox:checked {
~ .page-nav-label {
@apply text-red shadow-md;
}
~ .page-nav-sub {
@apply opacity-100 pointer-events-auto;
}
}
}
}
.search-field .form-input {
@apply w-24 xl:w-60;
}
}
}
}
&.headroom--unpinned.headroom--not-top {
transform: translateY(-300%);
}
&.headroom--not-top {
transform: translateY(0%);
height: 80px;
@apply shadow-lg;
.nav-wrapper {
@apply items-center;
.logo-wrapper {
.logo {
img {
max-height: 60px;
}
}
}
.type-utils-wrapper {
@apply hidden;
}
.main-wrapper {
@apply mt-0;
}
}
}
}
.nav-desktop-mobile {
@apply lg:hidden bg-white flex items-center justify-between p-4;
.mobile-logo {
@apply inline-block my-2;
height: 50px;
> img {
height: 100%;
width: auto;
}
}
}
(function () {
'use strict';
var mainNav = document.querySelector('.nav-desktop-wrapper');
// Init HeadroomJS
if (mainNav !== null) {
var headroom = new Headroom(mainNav, {
offset: mainNav.offsetHeight,
});
headroom.init();
}
// Close submenu when clicked outside
$(document).on('mouseup', function (e) {
var container = $('.nav-desktop-wrapper .page-nav-sub');
// If the target of the click isn't the container
if (!container.is(e.target) && container.has(e.target).length === 0) {
// Close submenu
$('.nav-desktop-wrapper .page-nav-checkbox:checked').trigger(
'click'
);
}
});
})();
No notes defined.