<div class="{{b 'side-nav' 'head'}}">
    <a href="#" class="{{b 'side-nav' 'brand'}}" data-ga4-event="home_click">
        {{allure-icon "allureLogo" noTooltip=true width="40px" height="40px"}}
        <span class="{{b 'side-nav' 'brand-text'}}">Allure</span>
    </a>
</div>
<ul class="{{b 'side-nav' 'menu'}}">
    {{#each tabs}}
        <li class="{{b 'side-nav' 'item'}}"
            data-tooltip="{{t title}}"
            data-ga4-event="tab_click"
            data-ga4-param-tab="{{tabName}}">
            <a href="#{{tabName}}" class="{{b 'side-nav' 'link' active=active}}">
                <span class="{{b 'side-nav' 'icon'}}">
                  {{allure-icon icon noTooltip=true width="22px" height="22px"}}
                </span>
                <div class="{{b 'side-nav' 'text'}}">{{t title}}</div>
            </a>
        </li>
    {{/each}}
</ul>
<div class="{{b 'side-nav' 'strut'}}"></div>
<div class="{{b 'side-nav' 'footer'}}">
    <div class="{{b 'side-nav' 'item'}}" data-tooltip="{{t 'controls.language'}}">
        <button class="{{b 'button'}} {{b 'button' inverse=true}} {{b 'side-nav' 'language-small' lang=language.id}}"
                data-ga4-event="language_menu_click">
            {{language.id}}
        </button>
    </div>

    <div class="{{b 'side-nav' 'item'}} " data-tooltip="{{t 'controls.expand'}}" data-ga4-event="expand_menu_click">
        <div class="{{b 'side-nav' 'collapse'}}">
            <span class="{{b 'side-nav' 'icon'}}">
                {{allure-icon "chevronLeft" noTooltip=true width="20px" height="20px"}}
            </span>
            <span class="{{b 'side-nav' 'text'}}">{{t 'controls.collapse'}}</span>
        </div>
    </div>
</div>
