{# {% extends 'pages/pages_header.html.twig' %} #}
{% import "page/macro/node.html.twig" as node %}
{% import 'page/macro/breadcrumbs.html.twig' as breadcrumbNode %}
{% block content %}
<div class="d-xl-none mobile-menu" id="o-wrapper">
<nav id="c-menu--slide-left" class="c-menu c-menu--slide-left">
<div class="head row">
<div class="col-11">
<a class="navbar-brand" href="{{ path('homepage') }}" title="{{ site_company_name|default('Get.Noticed') }}">
<svg viewBox="0 0 308 58" xmlns:xlink="http://www.w3.org/1999/xlink">
<use xlink:href="#svg-logo" title="Voetbalretour logo"></use>
</svg>
</a>
</div>
<button class="c-menu__close navbar-toggle">
<i class="far fa-times"></i>
</button>
</div>
<div class="wrapper">
<ul class="c-menu__items">
{% import "page/macro/mobile_menu.node.html.twig" as mobileNode %}
{% for page in pages %}
{{ mobileNode.nodeLink(page) }}
{% endfor %}
<li class="c-menu__item">
<a class="" href="/favorieten">
<i class="fas fa-star"></i>
Favorieten
</a>
</li>
</ul>
</div>
</nav><!-- /c-menu slide-left -->
</div>
<div id="c-mask" class="c-mask"></div><!-- /c-mask -->
<header id="header" class="">
<div class="container-fluid is-content-fluid is-container">
<div class="head d-none d-xl-block">
<div class="flex-group">
<a class="navbar-brand" href="{{ path('homepage') }}" title="{{ site_company_name|default('Get.Noticed') }}">
<img src="{{ media_asset(config_setting('site_logo')) }}"
alt="{{ site_company_name|default('Get.Noticed') }}" class="logo">
</a>
<nav class="header-nav main-nav">
<div id="header-menu">
<ul>
{% for page in pages %}
{{ node.nodeLink(page) }}
{% endfor %}
</ul>
</div>
</nav>
<nav class="user-nav is-position-relative">
<ul class="second-nav">
<li>
<a class="is-btn is-btn-icon stroke-small-r" href="/favorieten">
<i class="fas fa-star"></i>
{#<div class="number d-flex justify-content-center align-items-center"><span>2</span></div>#}
</a>
</li>
<li>
<a class="is-btn stroke-right" href="{{ path('user_login') }}"><i class="fas fa-user icon-before"></i>Mijn VR</a>
</li>
</ul>
</nav>
</div>
</div>
<div data-component="MenuMobile" class="head mobile d-xl-none">
<div class="col-12 flex-group flex-group__mobile">
<a class="navbar-brand" href="{{ path('homepage') }}" title="{{ site_company_name|default('Get.Noticed') }}">
<img class="logo" src="/uploads/schild.svg" alt="{{ site_company_name|default('Get.Noticed') }}">
</a>
<nav class="user-nav is-position-relative">
<ul class="second-nav">
<li>
<a class="is-btn is-btn-icon stroke-small-r" href="/favorieten">
<i class="fas fa-star"></i>
</a>
</li>
<li>
<a class="is-btn stroke-right" href="{{ path('user_login') }}"><i class="fas fa-user icon-before"></i>Mijn VR</a>
</li>
</ul>
</nav>
<button type="button" id="c-button--slide-left" class="navbar-toggle c-button--slide-left is-btn is-btn-icon stroke-small-r is-background-color-accent">
<span class="sr-only">Toggle navigation</span>
<i class="fa-solid fa-bars"></i>
</button>
</div>
</div>
</div>
</header>
{% endblock %}