<header id="global-sidebar" class="sidebar">
    {% tag siteUrl ? 'a' : 'div' with {
        id: 'system-info',
        href: siteUrl ?? false,
        rel: siteUrl ? 'noopener' : false,
        target: siteUrl ? '_blank' : false,
        title: siteUrl ? 'View site'|t('app') : false,
    } %}
        <div id="site-icon">
            {% if hasSystemIcon %}
                <img src="{{ craft.rebrand.icon.url }}" alt="">
            {% else %}
                {{ svg('@appicons/c-outline.svg', namespace=true)|attr({
                    aria: {hidden: 'true'},
                }) }}
            {% endif %}
        </div>
        <div id="system-name">
            <span class="h2">{{ systemName }}</span>
        </div>
    {% endtag %}

    <nav id="nav" aria-label="{{ 'Primary'|t('app') }}">
        <ul>
            {% for item in craft.cp.nav() %}
                {% set itemAttributes = {
                    id: item.id,
                    class: item.subnav ? 'has-subnav',
                } %}
                {% set linkAttributes = {
                    href: url(item.url),
                    class: item.sel ? 'sel',
                    aria: {
                        current: item.sel and not item.subnav ? 'page' : false,
                        label: item.ariaLabel ?? false,
                    },
                } %}
                <li {{ attr(itemAttributes) }}>
                    <a {{ attr(linkAttributes) }}>
                        <span class="icon icon-mask" aria-hidden="true">
                            {%- if item.icon is defined -%}
                                {{ svg(item.icon, sanitize=true, namespace=true) }}
                            {%- elseif item.fontIcon is defined -%}
                                <span data-icon="{{ item.fontIcon }}"></span>
                            {%- else -%}
                                {% include "_includes/defaulticon.svg.twig" with { label: item.label } %}
                            {%- endif -%}
                        </span>

                        <span class="label">{{ item.label }}</span>

                        {%- if not item.sel and item.badgeCount -%}
                            <span class="badge" aria-hidden="true">{{ item.badgeCount|number(decimals=0) }}</span>
                            {{ tag('span', {
                                class: 'visually-hidden',
                                data: {
                                    notification: true,
                                },
                                text: '{num, number} {num, plural, =1{notification} other{notifications}}'|t('app', {
                                    num: item.badgeCount,
                                }),
                            }) }}
                        {%- endif -%}
                    </a>
                    {% if item.subnav %}
                        <ul class="subnav">
                            {% for itemId, item in item.subnav %}
                                {% set itemIsSelected = (
                                    (selectedSubnavItem is defined and selectedSubnavItem == itemId) or
                                    (selectedSubnavItem is not defined and loop.first)
                                ) -%}
                                {% set linkAttributes = {
                                    href: url(item.url),
                                    class: [
                                        itemIsSelected ? 'sel',
                                        (item.external ?? false) ? 'external',
                                    ],
                                    target: (item.external ?? false) ? '_blank',
                                    aria: {
                                        current: itemIsSelected ? 'page' : false,
                                        label: item.ariaLabel ?? false,
                                    },
                                } %}

                                <li>
                                    <a {{ attr(linkAttributes) }}>
                                        {{ item.label }}

                                        {%- if not itemIsSelected and item.badgeCount is defined -%}
                                            <span class="badge" aria-hidden="true">{{ item.badgeCount|number(decimals=0) }}</span>
                                            {{ tag('span', {
                                                class: 'visually-hidden',
                                                data: {
                                                    notification: true,
                                                },
                                                text: '{num, number} {num, plural, =1{notification} other{notifications}}'|t('app', {
                                                    num: item.badgeCount,
                                                }),
                                            }) }}
                                        {%- endif -%}
                                    </a>
                                </li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                </li>
            {% endfor %}
        </ul>
    </nav>

    {% if currentUser.admin and devMode %}
        {% set devModeText = 'Craft CMS is running in Dev Mode.'|t('app') %}
        <div id="devmode">
            {{ tag('span', {
                class: 'visually-hidden',
                text: devModeText
            }) }}
        </div>
    {% endif %}
</header>
