deblan.io-murph/templates/module/_navigation.html.twig

{% set menu = _navigation.menu('menu') %}
{% set network = _navigation.menu('network') %}
{% set avatar = setting('avatar_image') %}

<div class="wide-menu hidden-small">
    <div class="fixed-menu">
        <div class="align-center">
            <a href="{{ safe_path('blog_menu_posts', {_domain: _domain}) }}">
                {% if avatar %}
                    <img src="{{ asset(avatar)|imagine_filter('site_avatar') }}" class="avatar round" alt="{{ avatar|file_attribute('title') }}">
                {% endif %}

                {{ include('module/_logo.html.twig') }}

                <span class="d-none">Accueil Deblan Blog</span>
            </a>
        </div>

        {% if menu %}
            <nav class="navigation {% if avatar %}navigation-with-avatar{% endif %}">
                <ul>
                    {%- for item in menu.rootNode.children({isVisible: true}) -%}
                        <li>
                            {%- set icon -%}
                                {%- if item.attributes.icon is defined -%}
                                    <span class="deblan-icon deblan-icon-{{ item.attributes.icon.value }}"></span>
                                {%- elseif item.attributes.svg is defined -%}
                                    <span class="deblan-icon-svg">
                                        {{- item.attributes.svg.value|raw -}}
                                    </span>
                                {%- endif -%}
                            {%- endset -%}

                            <a href="{{ safe_node_url(item, {_domain: _domain}) }}" {% if _store.isActiveNode(item, true) %}class="active"{% endif %} {% if item.hasExternalUrl %}target="_blank"{% endif %}>
                                {{- icon|raw -}}
                                {{- item.label -}}
                            </a>
                        </li>
                    {%- endfor -%}
                </ul>
            </nav>
        {% endif %}

        {%- if network -%}
            <ul class="links">
                {%- for item in network.rootNode.children({isVisible: true}) -%}
                    <li class="link link-{{ item.attributes.icon.value }}">
                        <a href="{{ safe_node_url(item) }}" class="deblan-icon deblan-icon-{{ item.attributes.icon.value }}" target="_blank">
                            <span>{{- item.label -}}</span>
                        </a>
                    </li>
                {%- endfor -%}
            </ul>
        {%- endif -%}
    </div>
</div>
<div class="small-menu hidden-large hidden-medium visible-small">
    <a href="{{ safe_path('blog_menu_posts') }}">
        {{ include('module/_logo.html.twig') }}
    </a>

    <nav class="navigation">
        {% if menu %}
            <ul>
                {%- for item in menu.rootNode.children({isVisible: true}) -%}
                    <li>
                        <a href="{{ safe_node_url(item, {_domain: _domain}) }}" {% if _store.isActiveNode(item, true) %}class="active"{% endif %} {% if item.hasExternalUrl %}target="_blank"{% endif %}>
                            {%- set icon -%}
                                {%- if item.attributes.icon is defined -%}
                                    <span class="deblan-icon deblan-icon-{{ item.attributes.icon.value }}"></span>
                                {% elseif item.attributes.svg is defined %}
                                    <span class="deblan-icon">
                                        {{ item.attributes.svg.value|raw }}
                                    </span>
                                {%- endif -%}
                            {%- endset -%}

                            {{- icon|raw -}}

                            {{ item.label }}
                        </a>
                    </li>
                {%- endfor -%}
            </ul>

        {% endif %}
    </nav>

    <button class="menu-opener" aria-label="Menu">
        <svg width="50" height="46" viewBox="0 0 100 100">
            <path class="line line1" d="M 20,29.000046 H 80.000231 C 80.000231,29.000046 94.498839,28.817352 94.532987,66.711331 94.543142,77.980673 90.966081,81.670246 85.259173,81.668997 79.552261,81.667751 75.000211,74.999942 75.000211,74.999942 L 25.000021,25.000058" />
            <path class="line line2" d="M 20,50 H 80" />
            <path class="line line3" d="M 20,70.999954 H 80.000231 C 80.000231,70.999954 94.498839,71.182648 94.532987,33.288669 94.543142,22.019327 90.966081,18.329754 85.259173,18.331003 79.552261,18.332249 75.000211,25.000058 75.000211,25.000058 L 25.000021,74.999942" />
        </svg>
    </button>
</div>