<section class="navbar">
<div class="container">
<div class="float-left d-xl-none">
<div class="nav-main">
<div class="nav-toggle">
<div class="bars">
<div class="bar">
<span></span>
</div>
<div class="bar">
<span></span>
</div>
<div class="bar">
<span></span>
</div>
</div>
</div>
</div>
</div>
<div class="logo float-left">
<a href="{{ path('homepage') }}">
{% if Settings is defined %}
<img src="{{Settings.logo}}">
{% endif %}
</a>
</div>
<div class="nav-center d-none d-xl-inline-block">
<div class="nav-main">
{{ custom_navigation('menu') }}
{# <ul class="nav">
{{ cms_navigation('', '', 0) }}
</ul> #}
</div>
</div>
<div class="float-right">
<div class="nav-container">
<div class="nav-main">
<div class="d-xl-none">
<div class="search-wrapper">
<div class="search">
<form method="get" action="/zoeken" class="search-field">
<input type="text" name="q" placeholder="Zoeken">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
<h6>Menu</h6>
{{ custom_navigation('menu') }}
{# <ul class="nav">
{{ cms_navigation('', '', 0) }}
</ul> #}
</div>
<h6 class="d-xl-none">{{'Mijn account'|trans}}</h6>
<div class="d-none d-xl-inline-block">
<div class="nav-buttons">
{% if app.user %}
<a class="dropdown-toggle" id="account-dropdown" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
<i class="far fa-user"></i>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="account-dropdown">
{{ custom_navigation('my-account', '', false) }}
</ul>
{% else %}
<a href="/mijn-account">
<i class="far fa-user"></i>
</a>
{% endif %}
</div>
</div>
<div class="d-xl-none">
{% if app.user %}
{{ custom_navigation('my-account') }}
{% else %}
<ul class="nav">
<li>
<a href="/mijn-account">
{{'Inloggen / Registreren'|trans}}
</a>
</li>
</ul>
{% endif %}
</div>
</div>
{% if webshop_enabled is defined and webshop_enabled %}
<div class="nav-webshop">
<ul class="nav">
{{ webshop_cart('<li>', '</li>') }}
</ul>
</div>
{% endif %}
<div class="search-wrapper d-none d-xl-inline-block">
<div class="search">
<form method="get" action="/zoeken" class="search-field">
<input type="text" name="q" placeholder="Zoeken">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<script>
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function (r) {
if (xhr.readyState !== 4) return;
if (xhr.status >= 200 && xhr.status < 300) {
let users = document.querySelectorAll('.user-login');
let guests = document.querySelectorAll('.user-guest');
if(JSON.parse(xhr.response).logged_in){
for(let i = 0; i < guests.length; i++){
guests[i].classList.add('hidden');
}
for(let i = 0; i < users.length; i++){
users[i].classList.remove('hidden');
}
}else{
for(let i = 0; i < guests.length; i++){
guests[i].classList.remove('hidden');
}
for(let i = 0; i < users.length; i++){
users[i].classList.add('hidden');
}
}
}
};
xhr.open('GET', '{{path('nav_account')}}');
xhr.send();
</script>