<nav id='nav-mobile-intranet' class='mm-menu' data-searchurl='#' data-placeholder='Vul je zoekterm in...'>
<ul>
<li>
<span>
<span class="icon fas fa-list fa-fw" aria-hidden="true"></span>
Thema’s
</span>
<ul>
<li>
<span>
<span class="icon far fa-id-card " aria-hidden="true"></span>
Personeelsadministratie
</span>
<ul>
<li>
<a href='#' title='Vacatures'>
Vacatures
</a>
</li>
<li>
<a href='#' title='Tikklok & Werktijden'>
Tikklok & Werktijden
</a>
</li>
<li>
<a href='#' title='Loopbaan'>
Loopbaan
</a>
</li>
<li>
<a href='#' title='Iemand in dienst nemen'>
Iemand in dienst nemen
</a>
</li>
<li>
<a href='#' title='Tuchtprocedure'>
Tuchtprocedure
</a>
</li>
<li class='footer-link'>
<a href='#' title='Alles over Personeelsadministratie'>
Alles over Personeelsadministratie
</a>
</li>
</ul>
</li>
<li>
<a href='#' title='Organisatie & beleid'>
<span class="icon far fa-users-cog " aria-hidden="true"></span>
Organisatie & beleid
</a>
</li>
<li>
<a href='#' title='Informatica & tools'>
<span class="icon far fa-laptop " aria-hidden="true"></span>
Informatica & tools
</a>
</li>
<li>
<a href='#' title='Aankopen'>
<span class="icon far fa-shopping-basket " aria-hidden="true"></span>
Aankopen
</a>
</li>
<li>
<a href='#' title='Verkoop & verhuur'>
<span class="icon far fa-tag " aria-hidden="true"></span>
Verkoop & verhuur
</a>
</li>
<li>
<a href='#' title='Mobiliteit'>
<span class="icon far fa-car " aria-hidden="true"></span>
Mobiliteit
</a>
</li>
<li>
<a href='#' title='Communicatie'>
<span class="icon far fa-comments " aria-hidden="true"></span>
Communicatie
</a>
</li>
<li>
<a href='#' title='Agenda'>
<span class="icon far fa-calendar-alt " aria-hidden="true"></span>
Agenda
</a>
</li>
<li>
<a href='#' title='Vorming'>
<span class="icon far fa-book-open " aria-hidden="true"></span>
Vorming
</a>
</li>
<li>
<a href='#' title='Onderzoek'>
<span class="icon far fa-file-search " aria-hidden="true"></span>
Onderzoek
</a>
</li>
<li>
<a href='#' title='Onderwijs'>
<span class="icon far fa-chalkboard-teacher " aria-hidden="true"></span>
Onderwijs
</a>
</li>
<li>
<a href='#' title='Thuis/Kantoor werken'>
<span class="icon far fa-house-leave " aria-hidden="true"></span>
Thuis/Kantoor werken
</a>
</li>
</ul>
</li>
<li>
<a href='#' title='Favorieten'>
<span class="icon far fa-heart fa-fw" aria-hidden="true"></span>
Favorieten
</a>
</li>
<li>
<a href='#' title='Meldingen'>
<span class="icon far fa-bell fa-fw" aria-hidden="true"></span>
Meldingen
</a>
</li>
<li>
<a href='#' title='Nieuws'>
<span class="icon far fa-newspaper fa-fw" aria-hidden="true"></span>
Nieuws
</a>
</li>
<li>
<a href='#' title='Agenda'>
<span class="icon far fa-calendar fa-fw" aria-hidden="true"></span>
Agenda
</a>
</li>
<ul class='mobile-utils'>
<li>
<a href='' title=''>
Vacatures
<span class="tag tag-sm tag-white tag-round tag-sm">
This is a tag
</span>
</a>
</li>
<li>
<a href='' title=''>Wie is wie</a>
</li>
<li>
<a href='' title=''>Bibliotheek</a>
</li>
<li>
<a href='' title=''>Contact</a>
</li>
</ul>
<ul class='mobile-language'>
<li>
<a href='' title=''>Nederlands</a>
</li>
<li>
<a href='' title=''>English</a>
</li>
</ul>
</ul>
</nav>
<nav id='nav-mobile-intranet-sticky'>
<div class='nav-mobile-intranet-sticky-inner'>
<a class='nav-mobile-logo' href='#'>
<img src='../../assets/img/logo_uhasselt_intranet.svg' alt='U-Hasselt Intranet' width='113' height='56' />
</a>
<a id='nav-mobile-intranet-toggle' class='nav-mobile-intranet-toggle' href='#nav-mobile-intranet'>
<span class="icon far fa-bars " aria-hidden="true"></span>
</a>
</div>
</nav>
<nav
id='nav-mobile-intranet'
class='mm-menu'
data-searchurl='{{navSearchUrl}}'
data-placeholder='{{navPlaceholder}}'
>
<ul>
{{#each pageNav}}
<li>
{{#if subItems}}
<span>
{{#if icon}}
{{render '@icon' icon}}
{{/if}}
{{text}}
</span>
<ul>
{{#each subItems}}
<li>
{{#if subItems}}
<span>
{{#if icon}}
{{render '@icon' icon}}
{{/if}}
{{text}}
</span>
<ul>
{{#each subItems}}
<li>
<a
href='{{href}}'
title='{{text}}'
>
{{#if icon}}
{{render '@icon' icon}}
{{/if}}
{{text}}
</a>
</li>
{{/each}}
{{#if footerLink}}
<li class='footer-link'>
<a
href='{{footerLink.href}}'
title='{{footerLink.text}}'
>
{{footerLink.text}}
</a>
</li>
{{/if}}
</ul>
{{else}}
<a href='{{href}}' title='{{text}}'>
{{#if icon}}
{{render '@icon' icon}}
{{/if}}
{{text}}
</a>
{{/if}}
</li>
{{/each}}
{{#if footerLink}}
<li>
<li class='footer-link'>
<a href='{{href}}' title='{{text}}'>
{{text}}
</a>
</li>
</li>
{{/if}}
</ul>
{{else}}
<a href='{{href}}' title='{{text}}'>
{{#if icon}}
{{render '@icon' icon}}
{{/if}}
{{text}}
</a>
{{/if}}
</li>
{{/each}}
<ul class='mobile-utils'>
<li>
<a href='{{href}}' title='{{text}}'>
Vacatures
{{render '@tag--tag-white-round'}}
</a>
</li>
<li>
<a href='{{href}}' title='{{text}}'>Wie is wie</a>
</li>
<li>
<a href='{{href}}' title='{{text}}'>Bibliotheek</a>
</li>
<li>
<a href='{{href}}' title='{{text}}'>Contact</a>
</li>
</ul>
<ul class='mobile-language'>
<li>
<a href='{{href}}' title='{{text}}'>Nederlands</a>
</li>
<li>
<a href='{{href}}' title='{{text}}'>English</a>
</li>
</ul>
</ul>
</nav>
<nav id='nav-mobile-intranet-sticky'>
<div class='nav-mobile-intranet-sticky-inner'>
<a class='nav-mobile-logo' href='#'>
<img
src='{{path "/assets/img/logo_uhasselt_intranet.svg"}}'
alt='U-Hasselt Intranet'
width='113'
height='56'
/>
</a>
<a
id='nav-mobile-intranet-toggle'
class='nav-mobile-intranet-toggle'
href='#nav-mobile-intranet'
>
{{render '@icon' stickyToggle}}
</a>
</div>
</nav>
{
"navSearchUrl": "#",
"navPlaceholder": "Vul je zoekterm in...",
"stickyToggle": {
"icon": "fa-bars",
"style": "far"
},
"link-register": {
"title": "Dit is een test",
"text": "Dit is een test"
},
"stickyNav": [
{
"href": "#",
"text": "Home",
"icon": {
"icon": "fa-home",
"style": "fal"
}
},
{
"href": "#",
"text": "Student",
"icon": {
"icon": "fa-user-graduate",
"style": "fal"
}
},
{
"href": "#",
"text": "Medewerker",
"icon": {
"icon": "fa-user-lock",
"style": "fal"
}
},
{
"href": "#",
"text": "Info voor",
"icon": {
"icon": "fa-info-circle",
"style": "fal"
}
}
],
"pageNav": [
{
"href": "#",
"text": "Thema’s",
"icon": {
"icon": "fa-list",
"style": "fas",
"modifier": "fa-fw"
},
"subItems": [
{
"href": "#",
"text": "Personeelsadministratie",
"icon": {
"icon": "fa-id-card",
"style": "far"
},
"footerLink": {
"href": "#",
"text": "Alles over Personeelsadministratie"
},
"subItems": [
{
"href": "#",
"text": "Vacatures"
},
{
"href": "#",
"text": "Tikklok & Werktijden"
},
{
"href": "#",
"text": "Loopbaan"
},
{
"href": "#",
"text": "Iemand in dienst nemen"
},
{
"href": "#",
"text": "Tuchtprocedure"
}
]
},
{
"href": "#",
"text": "Organisatie & beleid",
"icon": {
"icon": "fa-users-cog",
"style": "far"
}
},
{
"href": "#",
"text": "Informatica & tools",
"icon": {
"icon": "fa-laptop",
"style": "far"
}
},
{
"href": "#",
"text": "Aankopen",
"icon": {
"icon": "fa-shopping-basket",
"style": "far"
}
},
{
"href": "#",
"text": "Verkoop & verhuur",
"icon": {
"icon": "fa-tag",
"style": "far"
}
},
{
"href": "#",
"text": "Mobiliteit",
"icon": {
"icon": "fa-car",
"style": "far"
}
},
{
"href": "#",
"text": "Communicatie",
"icon": {
"icon": "fa-comments",
"style": "far"
}
},
{
"href": "#",
"text": "Agenda",
"icon": {
"icon": "fa-calendar-alt",
"style": "far"
}
},
{
"href": "#",
"text": "Vorming",
"icon": {
"icon": "fa-book-open",
"style": "far"
}
},
{
"href": "#",
"text": "Onderzoek",
"icon": {
"icon": "fa-file-search",
"style": "far"
}
},
{
"href": "#",
"text": "Onderwijs",
"icon": {
"icon": "fa-chalkboard-teacher",
"style": "far"
}
},
{
"href": "#",
"text": "Thuis/Kantoor werken",
"icon": {
"icon": "fa-house-leave",
"style": "far"
}
}
]
},
{
"href": "#",
"text": "Favorieten",
"icon": {
"icon": "fa-heart",
"style": "far",
"modifier": "fa-fw"
}
},
{
"href": "#",
"text": "Meldingen",
"icon": {
"icon": "fa-bell",
"style": "far",
"modifier": "fa-fw"
}
},
{
"href": "#",
"text": "Nieuws",
"icon": {
"icon": "fa-newspaper",
"style": "far",
"modifier": "fa-fw"
}
},
{
"href": "#",
"text": "Agenda",
"icon": {
"icon": "fa-calendar",
"style": "far",
"modifier": "fa-fw"
}
}
]
}
nav#nav-mobile-intranet:not(.mm-menu) {
display: none;
}
nav#nav-mobile-intranet {
@apply lg:hidden;
}
nav#nav-mobile-intranet.mm-menu {
--mm-color-background: #e03131;
--mm-color-background-emphasis: #e03131;
--mm-color-text: #ffffff;
top: 88px;
.mm-panels {
@apply bg-red;
@apply text-intro;
#mm-0 {
.mm-navbar {
@apply hidden !important;
}
}
.mobile-language {
@apply mt-5;
@apply text-md;
@apply pl-4;
@apply flex;
@apply flex-row;
li {
&:first-child:after {
content: '-';
@apply ml-1;
}
@apply mr-2;
}
.active {
@apply font-bold;
}
}
.mobile-utils {
@apply mt-5;
@apply text-md;
@apply pl-4;
@apply flex;
@apply flex-col;
li {
@apply border-0;
}
}
.mobile-social {
@apply mt-5;
@apply text-md;
@apply pl-4;
@apply flex;
@apply flex-row;
@apply border-0;
li {
@apply border-0;
}
}
}
.footer-link {
border: none;
margin-top: 16px;
text-decoration: underline;
}
.mm-navbar {
@apply bg-red;
@apply border-0;
&,
a {
@apply text-white;
}
.mm-btn_prev {
&::before {
@apply border-black;
}
}
.mm-btn_next {
@apply border-none;
@apply bg-black;
&::after {
@apply border-black;
}
}
}
.mm-navbar.mm-navbar_sticky {
--mm-navbar-size: 0;
}
.mm-btn.mm-navbar__btn:empty {
@apply hidden;
}
.mm-btn.mm-btn_prev {
&::before {
@apply border-white;
@apply left-4;
}
}
.mm-btn.mm-btn_next {
@apply border-none;
&::after {
@apply border-white;
}
}
.mm-listitem {
@apply border-b;
@apply border-red-400;
.mm-listitem__text {
@apply px-3;
@apply py-2;
}
.icon {
@apply mr-2;
}
&::after {
border: none;
}
}
.mobile-language.mm-listitem,
.mobile-utils.mm-listitem {
@apply border-0;
}
.mm-navbars_top {
&::before {
content: '';
@apply block bg-white;
}
.mm-navbar {
@apply bg-white;
.mm-navbar__searchfield {
@apply p-0 min-h-0;
.mm-searchfield {
::-webkit-input-placeholder {
@apply italic text-black;
}
:-ms-input-placeholder {
@apply italic text-black;
}
::placeholder {
@apply italic text-black;
}
.mm-searchfield__input {
input {
@apply bg-white text-black;
}
}
}
}
}
}
.mm-searchfield__btn {
display: flex;
align-items: center;
justify-content: center;
height: 44px;
&::after {
content: '\f002';
font-family: 'Font Awesome 5 Pro';
@apply border-0 text-white transform-none;
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
width: auto;
height: auto;
}
}
}
nav#nav-mobile-intranet-sticky {
@apply fixed top-0 left-0 w-screen z-10 bg-white;
@apply lg:hidden;
padding: 12px 24px;
.nav-mobile-logo {
display: flex;
width: 113px;
height: auto;
img {
width: 100%;
height: auto;
max-width: none;
}
}
.nav-mobile-intranet-sticky-inner {
@apply flex;
justify-content: space-between;
}
.nav-mobile-intranet-toggle {
@apply flex items-center h-16 text-black no-underline p-1;
.icon {
@apply block text-center;
@apply text-lg;
}
&#nav-mobile-intranet-toggle {
&.opened {
.icon {
&::before {
content: '\f00d';
}
}
}
}
}
}
(function () {
'use strict';
document.addEventListener('DOMContentLoaded', () => {
const mobileMenu = document.querySelector('nav#nav-mobile-intranet');
const action = mobileMenu.getAttribute('data-searchurl');
const placeholder = mobileMenu.getAttribute('data-placeholder');
if (mobileMenu != null) {
const mmenu = new Mmenu(
mobileMenu,
{
// Options
navbar: {
content: ['searchfield'],
},
searchfield: {
add: true,
addTo: 'panels',
placeholder: placeholder,
noResults: false,
},
},
{
// Configuration
classNames: {
selected: 'mm-active',
},
searchfield: {
form: {
action: action,
method: 'post',
},
input: {
type: 'text',
name: 's',
id: 'searchform',
},
submit: true,
},
}
);
const api = mmenu.API;
const navToggle = document.getElementById(
'nav-mobile-intranet-toggle'
);
if(navToggle !== null){
navToggle.addEventListener('click', function () {
navToggle.classList.toggle('opened');
if (mmenu.vars.opened) {
api.close();
}
});
}
api.bind('close:start', function () {
navToggle.classList.remove('opened');
});
}
});
})();
No notes defined.