{%- if editmode and document.type == 'snippet' -%}

    {{- pimcore_relation("headerNavigation", {
        "types": ["object"],
        "subtypes": {
            "object": ["object"],
        },
        "classes": ["NavigationMenu"]
    }) -}}

{%- else -%}

    {%- set header_navigation = pimcore_relation("headerNavigation") -%}

    {%- if not header_navigation.empty -%}

        {%- set navigation_menu = header_navigation.element -%}

        <div class="offcanvas offcanvas-end" tabindex="-1" id="website-header-nav" aria-label="{{ 'general.website_header_navigation_offcanvas_heading' | trans }}">

            <div class="offcanvas-header">

                <button type="button" class="btn btn-outline-dark d-flex align-items-center justify-content-center d-xxl-none p-10 lh-1 ms-auto" data-bs-dismiss="offcanvas" aria-label="{{ 'general.close_navigation' | trans }}">  
                    <span class="{{ material_symbols_class }}">close</span>
                </button>

            </div>

            <div class="offcanvas-body justify-content-lg-end pt-0">

                <ul class="navbar-nav gap-10">

                    {%- for node in navigation_menu.nodes -%}

                        <li class="nav-item">

                            {%- if not node.link.empty -%}

                                {%- set text = node.link.text -%}

                                {%- if not text -%}

                                    {%- if node.link.internalType == 'document' -%}
                                        {%- set text = pimcore_document(node.link.internal).properties.navigation_name.data %}
                                    {%- endif -%}

                                {%- endif -%}

                                {%- set class = 'nav-link' -%}

                                {%- if node.link.internal == app.request.get('current_id') -%}

                                    {%- set class = class ~ ' current' -%}

                                {%- endif -%}

                                {{- node.link.setClass(class).setText(text) | raw -}}

                            {%- endif -%}

                        </li>
                        
                    {%- endfor -%}

                </ul>

            </div>

        </div>

    {%- endif -%}

{%- endif -%}