{% macro menu(page) %}

<ul class="vertical menu simple icon-top" style="display:none;">

    {% for p in page.children %}
      {% if p.slug != "coalitions" and p.published() %}

        <li class="item "><a href="{{ p.url }}"><i class="fi-list"></i>{{ p.title }}</a>

        {% if p.slug == "outils-et-ressources" and p.published() %}
           
          <ul class="subitem">
            <li class=""><a href="{{ p.url }}/type:doc">Documents</a></li>
            <li class=""><a href="{{ p.url }}/type:video">Video</a></li>
            <li class=""><a href="{{ p.url }}/type:images">Photos</a></li>
            <li class=""><a href="{{ p.url }}/type:newsletter">Newsletter</a></li>
            <li class=""><a href="{{ p.url }}/type:pod">Podcasts</a></li>
            <li class=""><a href="{{ p.url }}/type:media">Media</a></li>
          </ul>
        {% else %}
          {% if p.slug == "nos-projets" %}
            <ul class="subitem">
            {% for c in p.children %}
            
              <li class=""><a href="{{ c.url }}">{{c.title}}</a></li>
          
            {% endfor %}
          </ul>
          {% endif %}
        {% endif %} 
        </li>
        
      {% endif %}
    {% endfor %}

    {% if grav.user.access.site.login == 1 %} <li><a href="{{ base_url }}/login">{{t('MEDIA.LOGOUT')|e}}</a></li> {% endif %}
</ul>
{% endmacro %}

<ul class="nav columns large-11 medium-12 small-12 large-offset-1 medium-offset-0 small-offset-0">

    <div class="row">
      <div class="logo columns large-5 medium-6 small-9">
        <a href="{{ base_url }}"><img src="{{ url('theme://images/logo.svg') }}" alt=""></a>
      </div>
      <div class="reseau large-5 large-offset-0 medium-5 medium-offset-0">
        <div class="row">
          <div class="columns large-2 align-self-bottom">
            <a href="mailto:{{site.author.email}}">
              <img src="{{ url('theme://images/contact.svg') }}" alt="">
            </a>
          </div>
          <div class="columns large-1 align-self-bottom">
            <a href="https://www.facebook.com/CampagneTournonslapage">
              <img src="{{ url('theme://images/f.svg') }}" alt="">
            </a>
          </div>
          <div class="columns large-2 align-self-bottom">
            <a href="https://twitter.com/TournonsLaPage/">
            <img src="{{ url('theme://images/t.svg') }}" alt="">
            </a>
          </div>
          <div class="columns large-2 align-self-bottom">
            <a href="https://www.linkedin.com/company/tournons-la-page">
            <img src="{{ url('theme://images/in.svg') }}" alt="">
            </a>
          </div>
          <div class="columns large-2 align-self-bottom">
            <a href="https://www.youtube.com/channel/UCj5XBLG7pHdvuZaUEmV1HbQ">
            <img src="{{ url('theme://images/you.svg') }}" alt="">
            </a>
          </div>
           <div class="columns large-1 align-self-bottom searchBar">
                <a>
                  <i style="color: #6c6d7d"class="fa fa-search" aria-hidden="true"></i>
                </a>
          </div>
          <div class="columns large-2 align-self-bottom" >
            {% include 'partials/langswitcher.html.twig' %}
          </div>
        </div>
      </div>
      <div class="large-1 columns large-offset-1 medium-1 small-2" style="position:relative" >
        <div class="menu-container">
          <div class="icon">
            <div></div><div></div><div></div>
          </div>
          {{ _self.menu(pages) }}
        </div>
      </div>
    </div>
</ul>