<div class="sidebar" x-data="{ showNav: false }">
    {{ if collection.handle == 'pages' || current_template == '2014-2020/show' || current_template == '2021-2027/show' }}
        {{ nav scope="item2"}}
            {{ if depth == 2 && (is_current || is_parent) }}
                <a class="active-page{{ if is_current }} active{{ /if }}" href="{{ url }}">{{ title }}</a>
                <button class="active-page mobile" @click.prevent="showNav = !showNav">
                    <svg :class="{ 'rotate-180': showNav }" aria-hidden="true">
                        <use xlink:href="#icon-angle-down"></use>
                    </svg>
                    {{ title }}
                </button>
                <ul class="sidebar-nav" :class="{ 'show-nav': showNav }">
                    {{ children scope="item"}}
                        {{ if item.entry_id == "f43f08d8-a6ad-4460-9bea-e03577545828" }}
                            <li class="nav-item">
                                <a href="/" target="_blank" rel="noopener">
                                    {{ trans:strings.portfolio_archive }}
                                </a>
                            </li>
                        {{ /if }}
                        <li class="nav-item"
                            {{ if item.children }}
                                {{ if item.is_current || item.is_parent }}
                                    x-data="{ subnavOpen: true }"
                                {{ else }}
                                    x-data="{ subnavOpen: false }"
                                {{ /if}}
                            {{ /if}}
                        >
                            <a href="{{ item.url }}" class="{{ if item.is_current }}active{{ /if }}{{ if item.children }} is-parent{{ /if }}">
                                {{ item.title }}
                                {{ if item.children }}
                                    <button class="toogle-submenu" @click.prevent="subnavOpen = !subnavOpen">
                                        <svg :class="{ 'rotate-180': subnavOpen }" aria-hidden="true">
                                            <use xlink:href="#icon-angle-down-small"></use>
                                        </svg>
                                    </button>
                                {{ /if }}
                            </a>
                            {{ if item.children }}
                                <ul class="second-nav"
                                    x-show="subnavOpen"
                                    x-cloak
                                >
                                    {{ item.children scope="item2"}}
                                        <li class="second-nav-item{{ if item2.children }} parent{{ /if}}"
                                            {{ if item2.children }}
                                                {{ if item2.is_current || item2.is_parent }}
                                                    x-data="{ subnavOpen2: true }"
                                                {{ else }}
                                                    x-data="{ subnavOpen2: false }"
                                                {{ /if}}
                                            {{ /if}}
                                        >
                                            <a href="{{ item2.url }}"{{ if item2.is_current }} class="active"{{ /if }}>
                                                {{ item2.title }}
                                                {{ if item2.children }}
                                                    <button class="toogle-submenu" @click.prevent="subnavOpen2 = !subnavOpen2">
                                                        <svg :class="{ 'rotate-180': subnavOpen2 }" aria-hidden="true">
                                                            <use xlink:href="#icon-angle-down-small"></use>
                                                        </svg>
                                                    </button>
                                                {{ /if }}
                                            </a>
                                            {{ if item2.children }}
                                                <ul class="second-nav"
                                                    x-show="subnavOpen2"
                                                    x-cloak
                                                >
                                                    {{ item2.children }}
                                                        <li class="second-nav-item">
                                                            <a href="{{ url }}"{{ if is_current }} class="active"{{ /if }}>{{ title }}</a>
                                                        </li>
                                                    {{ /item2.children }}
                                                </ul>
                                            {{ /if }}
                                        </li>
                                    {{ /item.children }}
                                </ul>
                            {{ /if }}
                        </li>
                    {{ /children }}
                </ul>
            {{ else }}
                {{ if children }}
                    {{ *recursive children* }}
                {{ /if }}
            {{ /if }}
        {{ /nav }}
    {{ /if }}
</div> <!-- .sidebar -->