<div class="nav-desktop-intranet-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_intranet.svg" alt="">
</a>
</div>
<div class="type-utils-wrapper">
<ul class="util-nav">
<li class="util-nav-li">
<a class="link" href="#" title="">
<span class="text">
Applicaties
</span>
</a>
</li>
<li class="util-nav-li">
<a class="link" href="#" title="">
<span class="text">
Nieuws
</span>
</a>
</li>
<li class="util-nav-li">
<a class="link" href="#" title="">
<span class="text">
Agenda
</span>
</a>
</li>
<li class="util-nav-li">
<a class="link" href="#" title="">
<span class="text">
Wie is wie?
</span>
</a>
</li>
<li class="util-nav-li">
<a class="link" href="#" title="">
<span class="text">
Vacatures
</span>
<div class="util-nav-tag">
<span class="tag tag-sm tag-red tag-round tag-sm">
This is a tag
</span>
</div>
</a>
</li>
<li>
<div class="dropdown">
<button class="deskop-nav-intranet-dropbtn">NL <span class="icon far fa-chevron-down fa-xs " aria-hidden="true"></span></button>
<div id="myDropdown" class="dropdown-content">
<a href="/nl">Nederlands</a>
<a href="/en">English</a>
</div>
</div>
</li>
</ul>
</div>
<div class="main-wrapper">
<div>
<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>
<ul class="page-nav">
<li class="level-1 check-0">
<input type="checkbox" id="page-nav-checkbox0" class="page-nav-checkbox">
<label for="page-nav-checkbox0" class="page-nav-label">
Thema's
<span class="icon far fa-chevron-down fa-xs " aria-hidden="true"></span>
</label>
<div class="page-nav-sub page-nav-sub-6">
<div class='subnav subnav-cols'>
<ul class='subnav-items'>
<div class="link-list transparent">
<div class="link-list-header ">
<div class="link-list-icon-header">
<div class="link-list-header-icon">
<span class="icon far fa-graduation-cap " aria-hidden="true"></span>
</div>
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
</div>
</div>
<ul>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">A USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">Another USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
</ul>
</div>
<div class="link-list transparent">
<div class="link-list-header ">
<div class="link-list-icon-header">
<div class="link-list-header-icon">
<span class="icon far fa-graduation-cap " aria-hidden="true"></span>
</div>
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
</div>
</div>
<ul>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">A USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">Another USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
</ul>
</div>
<div class="link-list transparent">
<div class="link-list-header ">
<div class="link-list-icon-header">
<div class="link-list-header-icon">
<span class="icon far fa-graduation-cap " aria-hidden="true"></span>
</div>
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
</div>
</div>
<ul>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">A USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">Another USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
</ul>
</div>
<div class="link-list transparent">
<div class="link-list-header ">
<div class="link-list-icon-header">
<div class="link-list-header-icon">
<span class="icon far fa-graduation-cap " aria-hidden="true"></span>
</div>
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
</div>
</div>
<ul>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">A USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">Another USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
</ul>
</div>
<div class="link-list transparent">
<div class="link-list-header ">
<div class="link-list-icon-header">
<div class="link-list-header-icon">
<span class="icon far fa-graduation-cap " aria-hidden="true"></span>
</div>
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
</div>
</div>
<ul>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">A USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">Another USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
</ul>
</div>
<div class="link-list transparent">
<div class="link-list-header ">
<div class="link-list-icon-header">
<div class="link-list-header-icon">
<span class="icon far fa-graduation-cap " aria-hidden="true"></span>
</div>
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
</div>
</div>
<ul>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">A USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">Another USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
</ul>
</div>
<div class="link-list transparent">
<div class="link-list-header ">
<div class="link-list-icon-header">
<div class="link-list-header-icon">
<span class="icon far fa-graduation-cap " aria-hidden="true"></span>
</div>
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
</div>
</div>
<ul>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">A USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">Another USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
</ul>
</div>
<div class="link-list transparent">
<div class="link-list-header ">
<div class="link-list-icon-header">
<div class="link-list-header-icon">
<span class="icon far fa-graduation-cap " aria-hidden="true"></span>
</div>
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
</div>
</div>
<ul>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">A USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">Another USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
</ul>
</div>
<div class="link-list transparent">
<div class="link-list-header ">
<div class="link-list-icon-header">
<div class="link-list-header-icon">
<span class="icon far fa-graduation-cap " aria-hidden="true"></span>
</div>
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
</div>
</div>
<ul>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">A USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">Another USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
</ul>
</div>
<div class="link-list transparent">
<div class="link-list-header ">
<div class="link-list-icon-header">
<div class="link-list-header-icon">
<span class="icon far fa-graduation-cap " aria-hidden="true"></span>
</div>
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
</div>
</div>
<ul>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">A USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">Another USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
</ul>
</div>
<div class="link-list transparent">
<div class="link-list-header ">
<div class="link-list-icon-header">
<div class="link-list-header-icon">
<span class="icon far fa-graduation-cap " aria-hidden="true"></span>
</div>
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
</div>
</div>
<ul>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">A USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">Another USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
</ul>
</div>
<div class="link-list transparent">
<div class="link-list-header ">
<div class="link-list-icon-header">
<div class="link-list-header-icon">
<span class="icon far fa-graduation-cap " aria-hidden="true"></span>
</div>
<h3 class="heading title">
Lorem ipsum dolor sit amet
</h3>
</div>
</div>
<ul>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">A USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">Another USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
</ul>
</div>
</ul>
</div>
</div>
</li>
<li class="level-1 check-1">
<input type="checkbox" id="page-nav-checkbox1" class="page-nav-checkbox">
<label for="page-nav-checkbox1" class="page-nav-label">
Favorieten
<span class="icon far fa-chevron-down fa-xs " aria-hidden="true"></span>
</label>
<div class="page-nav-sub page-nav-sub-2">
<div class='subnav '>
<ul class='subnav-items'>
<div class="link-list transparent">
<ul class="link-list-ul">
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">A USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">Another USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">A USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">Another USP for UHasselt</span>
</a>
</li>
</ul>
</div>
</ul>
<div class='subnav-footer'>
<a href="#" class="link " aria-label="" title="This is what a link looks like">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">This is what a link looks like</span>
</a>
</div>
</div>
</div>
</li>
</ul>
<div class="page-nav-side">
<div class="page-nav-side-bell">
<a href="#" class="notification ">
<span class="icon fal fa-bell " aria-hidden="true"></span>
</a>
</div>
<div class="page-nav-side-avatar">
<div class="avatar avatar-black">
<span>ET</span>
</div>
</div>
</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-intranet-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_intranet.svg' }}" alt="">
</a>
</div>
<div class="type-utils-wrapper">
<ul class="util-nav">
{{#each utilsNav}}
<li class="util-nav-li">
<a
class="link"
href="{{this.href}}"
title="{{this.title}}"
{{#if external}}target="_blank" rel="noopener noreferrer"{{/if}}
>
<span class="text">
{{this.text}}
</span>
{{#if tag}}
<div class="util-nav-tag">
{{render '@tag--tag-red-round'}}
</div>
{{/if}}
</a>
</li>
{{/each}}
<li>
<div class="dropdown">
<button class="deskop-nav-intranet-dropbtn">NL {{render '@icon' @root.dropdownIcon}}</button>
<div id="myDropdown" class="dropdown-content">
<a href="/nl">Nederlands</a>
<a href="/en">English</a>
</div>
</div>
</li>
</ul>
</div>
<div class="main-wrapper">
<div>
{{render '@search-field'}}
</div>
<ul class="page-nav">
{{#each pageNav}}
{{#if subItems}}
<li class="level-1 check-{{@index}}">
<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>
{{#if cols}}
<div class="page-nav-sub page-nav-sub-6">
{{render '@subnav--6-columns'}}
</div>
{{else}}
<div class="page-nav-sub page-nav-sub-2">
{{render '@subnav'}}
</div>
{{/if}}
</li>
{{else}}
<li class="level-1">
<a href="{{href}}">{{text}}</a>
</li>
{{/if}}
{{/each}}
</ul>
<div class="page-nav-side">
<div class="page-nav-side-bell">
{{ render '@notification' }}
</div>
<div class="page-nav-side-avatar">
{{ render '@avatar' }}
</div>
</div>
</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": "Thema's",
"cols": true,
"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": "Favorieten",
"cols": false,
"subIcon": {
"icon": "fa-caret-right",
"style": "fas",
"size:": "fa-xs"
},
"subItems": [
{
"href": "#",
"text": "Toekomstige studenten"
},
{
"href": "#",
"text": "Studenten"
},
{
"href": "#",
"text": "Doctorandi"
},
{
"href": "#",
"text": "Alumni"
}
]
}
],
"utilsNav": [
{
"href": "#",
"text": "Applicaties"
},
{
"href": "#",
"text": "Nieuws"
},
{
"href": "#",
"text": "Agenda"
},
{
"href": "#",
"text": "Wie is wie?"
},
{
"href": "#",
"text": "Vacatures",
"tag": true
}
],
"userNav": {
"href": "#",
"text": "Elke Willems"
}
}
.nav-desktop-intranet-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;
/**/
.deskop-nav-intranet-dropbtn {
padding: 8px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
@apply shadow-lg;
display: none;
position: absolute;
right: 0;
background-color: white;
min-width: 160px;
overflow: auto;
z-index: 1;
}
.dropdown-content button,.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: white;
}
.show {
display: block;
}
/**/
.widelogo {
max-height: 98px;
}
.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;
display: flex;
flex-flow: column;
justify-content: flex-end;
height: 100%;
.logo {
@apply inline-block;
max-height: 98px;
img {
width: auto;
height: 100%;
}
}
}
.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;
}
.util-nav-li {
display: flex;
align-items: center;
}
.util-nav-tag {
margin-left: 8px;
}
ul.type-nav li {
@apply flex;
@apply items-center;
span {
@apply mr-2;
}
}
}
.main-wrapper {
@apply flex items-center mt-8;
grid-area: main;
.page-nav-side {
display: flex;
align-items: center;
.page-nav-side-avatar,
.page-nav-side-bell {
margin-left: 20px;
}
}
ul.page-nav {
@apply flex flex-row flex-wrap;
@apply ml-auto;
.page-nav-label {
@apply text-lg font-medium leading-10;
}
> 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;
@apply opacity-0 pointer-events-none;
@apply shadow-lg bg-white;
left: 0;
top: 50px;
}
.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;
border: none;
}
}
}
}
&.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: 98px;
}
}
}
.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;
}
}
}
{
const pageNavSubArray = document.querySelectorAll(`.page-nav-sub`);
const pageNavCheckList = document.querySelectorAll(`.page-nav-checkbox`);
let pageNavCheckArray = Array.from(pageNavCheckList);
const pageNavCheckArrayFunction = (element, item) => {
if (item !== element) {
item.checked = false;
const chevron2 = item.parentNode.querySelector(
`.page-nav-label .icon`
);
chevron2.classList.remove('fa-chevron-up');
chevron2.classList.add('fa-chevron-down');
}
};
const functionalityNavigation = () => {
const setActiveStateNavElement = (element) => {
const chevron = element.parentNode.querySelector(
`.page-nav-label .icon`
);
if (element.checked === true) {
chevron.classList.remove('fa-chevron-down');
chevron.classList.add('fa-chevron-up');
} else {
chevron.classList.remove('fa-chevron-up');
chevron.classList.add('fa-chevron-down');
}
pageNavCheckArray.forEach((item) => {
pageNavCheckArrayFunction(element, item);
});
};
pageNavCheckArray.forEach((element) => {
element.addEventListener('click', () => {
document.getElementById('myDropdown').classList.remove('show');
setActiveStateNavElement(element);
});
});
};
const dropDownLanguage = () => {
const $deskopNavIntranetDropbtn = document.querySelector(
`.deskop-nav-intranet-dropbtn`
);
if($deskopNavIntranetDropbtn !== null){
$deskopNavIntranetDropbtn.addEventListener('click', () => {
pageNavCheckArray.forEach((item) => {
pageNavCheckArrayFunction(null, item);
});
document.getElementById('myDropdown').classList.toggle('show');
});
}
window.onclick = function (event) {
if (!event.target.matches('.deskop-nav-intranet-dropbtn')) {
var dropdowns =
document.getElementsByClassName('dropdown-content');
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
};
};
const init = () => {
const checkZero = document.querySelector(`.check-0`);
const checkOne = document.querySelector(`.check-1`);
const subNav2 = document.querySelector(`.page-nav-sub-2`);
const subNav6 = document.querySelector(`.page-nav-sub-6`);
const navWrapper = document.querySelector(`.nav-wrapper`);
const repeatScale = () => {
// Sub-nav-6
const getWidhtNavWrapper = navWrapper.getBoundingClientRect().width;
const spacingElement = (window.innerWidth - getWidhtNavWrapper) / 2;
subNav6.style.minWidth = `${getWidhtNavWrapper}px`;
const rect = checkZero.getBoundingClientRect();
subNav6.style.left = `-${rect.left - spacingElement}px`;
// Sub-nav-2
const getWidhtsubNav2 = subNav2.getBoundingClientRect().width;
const rect2 = checkOne.getBoundingClientRect();
subNav2.style.left = `${
-1 *
(rect2.left -
spacingElement -
getWidhtNavWrapper +
getWidhtsubNav2)
}px`;
requestAnimationFrame(repeatScale);
};
requestAnimationFrame(repeatScale);
functionalityNavigation();
dropDownLanguage();
};
init();
}
(function () {
'use strict';
var mainNav = document.querySelector('.nav-desktop-intranet-wrapper');
// Init HeadroomJS
if (mainNav !== null) {
var headroom = new Headroom(mainNav, {
offset: mainNav.offsetHeight,
});
headroom.init();
}
})();
No notes defined.