@let opened = opened$ | async;

<a routerLink="/" class="docs-navbar__left">
    <!-- prettier-ignore -->
    <svg height="28" viewBox="0 0 28 28" width="28" xmlns="http://www.w3.org/2000/svg" class="docs-navbar__mobile-logo"><path d="M27.2998 16.7998H17.4998C17.1132 16.7998 16.7998 17.1132 16.7998 17.4998V27.2998C16.7998 27.6865 17.1132 27.9998 17.4998 27.9998H27.2998C27.6865 27.9998 27.9998 27.6865 27.9998 27.2998V17.4998C27.9998 17.1132 27.6865 16.7998 27.2998 16.7998Z" fill="#FF0000"/><path clip-rule="evenodd" d="M10.5 0H0.7C0.315 0 0 0.315 0 0.7V10.5C0 10.885 0.315 11.2 0.7 11.2H4.9C5.285 11.2 5.6 10.885 5.6 10.5V6.3C5.6 5.915 5.915 5.6 6.3 5.6H10.5C10.885 5.6 11.2 5.285 11.2 4.9V0.7C11.2 0.315 10.885 0 10.5 0Z" fill="#FF0000" fill-rule="evenodd"/><path clip-rule="evenodd" d="M10.5 16.7998H0.7C0.315 16.7998 0 17.1148 0 17.4998V21.6998C0 22.0848 0.315 22.3998 0.7 22.3998H4.9C5.285 22.3998 5.6 22.7148 5.6 23.0998V27.2998C5.6 27.6848 5.915 27.9998 6.3 27.9998H10.5C10.885 27.9998 11.2 27.6848 11.2 27.2998V17.4998C11.2 17.1148 10.885 16.7998 10.5 16.7998Z" fill="#FF0000" fill-rule="evenodd"/><path clip-rule="evenodd" d="M27.2998 0H23.0998C22.7148 0 22.3998 0.315 22.3998 0.7V4.9C22.3998 5.285 22.0848 5.6 21.6998 5.6H17.4998C17.1148 5.6 16.7998 5.915 16.7998 6.3V10.5C16.7998 10.885 17.1148 11.2 17.4998 11.2H27.2998C27.6848 11.2 27.9998 10.885 27.9998 10.5V0.7C27.9998 0.315 27.6848 0 27.2998 0Z" fill="#FF0000" fill-rule="evenodd"/></svg>
</a>

<div class="docs-navbar__right flex layout-align-space-between">
    <div class="layout-row docs-navbar__anchor">
        @if (docStates.isHeaderOverflown) {
            <button kbq-button [color]="'contrast'" [kbqStyle]="'transparent'" (click)="docStates.scrollUp()">
                {{ docStates.currentHeader?.textContent }}
            </button>
        }
    </div>

    <div class="layout-row layout-align-center-center">
        <a
            href="https://github.com/koobiq/angular-components"
            kbq-button
            class="kbq-button-icon docs-navbar__github-icon"
            [color]="'contrast'"
            [kbqStyle]="'transparent'"
        >
            <i kbq-icon="">
                <!-- prettier-ignore -->
                <svg id="Capa_1" xml:space="preserve" version="1.1" viewBox="0 0 438.549 438.549" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" y="0px"><g><path d="M409.132,114.573c-19.608-33.596-46.205-60.194-79.798-79.8C295.736,15.166,259.057,5.365,219.271,5.365		c-39.781,0-76.472,9.804-110.063,29.408c-33.596,19.605-60.192,46.204-79.8,79.8C9.803,148.168,0,184.854,0,224.63		c0,47.78,13.94,90.745,41.827,128.906c27.884,38.164,63.906,64.572,108.063,79.227c5.14,0.954,8.945,0.283,11.419-1.996		c2.475-2.282,3.711-5.14,3.711-8.562c0-0.571-0.049-5.708-0.144-15.417c-0.098-9.709-0.144-18.179-0.144-25.406l-6.567,1.136
                            c-4.187,0.767-9.469,1.092-15.846,1c-6.374-0.089-12.991-0.757-19.842-1.999c-6.854-1.231-13.229-4.086-19.13-8.559		c-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559		c-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-0.951-2.568-2.098-3.711-3.429c-1.142-1.331-1.997-2.663-2.568-3.997		c-0.572-1.335-0.098-2.43,1.427-3.289c1.525-0.859,4.281-1.276,8.28-1.276l5.708,0.853c3.807,0.763,8.516,3.042,14.133,6.851
                            c5.614,3.806,10.229,8.754,13.846,14.842c4.38,7.806,9.657,13.754,15.846,17.847c6.184,4.093,12.419,6.136,18.699,6.136		c6.28,0,11.704-0.476,16.274-1.423c4.565-0.952,8.848-2.383,12.847-4.285c1.713-12.758,6.377-22.559,13.988-29.41		c-10.848-1.14-20.601-2.857-29.264-5.14c-8.658-2.286-17.605-5.996-26.835-11.14c-9.235-5.137-16.896-11.516-22.985-19.126		c-6.09-7.614-11.088-17.61-14.987-29.979c-3.901-12.374-5.852-26.648-5.852-42.826c0-23.035,7.52-42.637,22.557-58.817
                            c-7.044-17.318-6.379-36.732,1.997-58.24c5.52-1.715,13.706-0.428,24.554,3.853c10.85,4.283,18.794,7.952,23.84,10.994		c5.046,3.041,9.089,5.618,12.135,7.708c17.705-4.947,35.976-7.421,54.818-7.421s37.117,2.474,54.823,7.421l10.849-6.849		c7.419-4.57,16.18-8.758,26.262-12.565c10.088-3.805,17.802-4.853,23.134-3.138c8.562,21.509,9.325,40.922,2.279,58.24		c15.036,16.18,22.559,35.787,22.559,58.817c0,16.178-1.958,30.497-5.853,42.966c-3.9,12.471-8.941,22.457-15.125,29.979
                            c-6.191,7.521-13.901,13.85-23.131,18.986c-9.232,5.14-18.182,8.85-26.84,11.136c-8.662,2.286-18.415,4.004-29.263,5.146		c9.894,8.562,14.842,22.077,14.842,40.539v60.237c0,3.422,1.19,6.279,3.572,8.562c2.379,2.279,6.136,2.95,11.276,1.995		c44.163-14.653,80.185-41.062,108.068-79.226c27.88-38.161,41.825-81.126,41.825-128.906		C438.536,184.851,428.728,148.168,409.132,114.573z" /></g></svg>
            </i>
        </a>

        <button
            kbq-button
            class="kbq-button-icon"
            [color]="'contrast'"
            [kbqDropdownTriggerFor]="themeDropdown"
            [kbqStyle]="'transparent'"
        >
            <i kbq-icon="kbq-sun-moon_16" [color]="'contrast'"></i>
        </button>

        <docs-docsearch />

        <button
            kbq-button
            class="kbq-button-icon docs-navbar__mobile-menu"
            [color]="'contrast'"
            [kbqStyle]="'transparent'"
            (click)="toggleMenu()"
        >
            <i
                kbq-icon=""
                [class.kbq-bars-horizontal_32]="!opened"
                [class.kbq-xmark_32]="opened"
                [color]="'contrast'"
            ></i>
        </button>

        <kbq-dropdown #themeDropdown="kbqDropdown" [class]="'docs-dropdown'">
            <div class="kbq-dropdown__group-header">
                <span class="kbq-caps-compact-strong">ТЕМА</span>
            </div>

            @for (theme of themeSwitch.data; track theme; let i = $index) {
                <button kbq-dropdown-item [class.kbq-selected]="theme.selected" (click)="setTheme(i)">
                    {{ theme.name }}
                </button>
            }
        </kbq-dropdown>
    </div>
</div>