{% import "_includes/links" as links %}

{% macro action(item, isSubnav, isSelected, showIcon) %}

{% set showIcon = showIcon ?? true %}

{% set selected = item.sel ?? isSelected ?? false %}

{% set badgeCount = item.badgeCount ?? false %}

{% set external = item.external ?? false %}

{% set linkAttributes = {

id: (item.id ?? null) ? "#{item.id}-link" : null,

href: (item.url ?? false) ? url(item.url) : null,

class: [

'sidebar-action',

(external ? 'external'),

(selected ? 'sel'),

],

target: external ? '_blank',

aria: {

label: item.ariaLabel ?? false,

},

}|merge(item.linkAttributes ?? {}, recursive=true) %}

{% tag 'a' with linkAttributes %}

<span class="sidebar-action__prefix">

<span class="nav-icon" aria-hidden="true">

{% set icon = item.icon ?? false %}

{%- if icon is not same as(false) and icon is not same as(null) and icon is not same as('') -%}

{{ iconSvg(item.icon) }}

{%- elseif item.fontIcon ?? false -%}

<span data-icon="{{ item.fontIcon }}"></span>

{%- else -%}

<span class="nav-indicator"></span>

{%- endif -%}

</span>

</span>

<span class="sidebar-action__label">

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

{% if external %}

{{ links.externalLinkIcon() }}

{% endif %}

</span>

<span class="sidebar-action__suffix">

{%- if badgeCount -%}

<span class="sidebar-action__badge">

<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,

}),

}) }}

</span>

{%- endif -%}

{% if not isSubnav and (item.subnav ?? false) %}

<craft-disclosure

class="nav-item__trigger"

state="{{ item.sel ? 'expanded' : 'collapsed' }}"

>

<button

type="button"

class="btn menubtn hairline"

aria-controls="{{ item.id }}-subnav"

aria-describedby="{{ item.id }}-link"

aria-expanded="{{ item.sel ? 'true' : 'false' }}"

>

<span class="visually-hidden">{{ 'Open subnavigation' |t('app') }}</span>

</button>

</craft-disclosure>

{% endif %}

</span>

{% endtag %}

{% endmacro %}

<craft-global-sidebar>

<header id="global-sidebar" class="global-sidebar">

<div class="global-sidebar__header">

{% include '_layouts/components/system-info' %}

</div>

<div class="global-sidebar__nav">

<nav id="nav" class="global-nav" aria-label="{{ 'Primary'|t('app') }}">

<ul>

{% for item in craft.cp.nav() %}

{% set itemAttributes = {

id: item.id,

class: [

item.subnav ? 'has-subnav'

],

} %}

<li {{ attr(itemAttributes) }}>

<div class="nav-item {% if item.sel %}sel{% endif %}">

{{ _self.action(item, false) }}

</div>

{% if item.subnav %}

<ul

class="nav-item__subnav"

id="{{ item.id }}-subnav"

data-state="{{ item.sel ? 'expanded' : 'collapsed' }}"

>

{% for subItemId, subItem in item.subnav %}

{% set itemIsSelected = selectedSubnavItem is defined and selectedSubnavItem == subItemId and subItem.url in craft.app.request.fullPath -%}

<li>

<div class="nav-item nav-item--sub {% if itemIsSelected %}sel{% endif %}">

{{ _self.action(subItem|merge({

linkAttributes: {

class: ['sidebar-action--sub'],

aria: {

current: itemIsSelected ? 'page' : false,

},

}

}, recursive=true), true, itemIsSelected, false) }}

</div>

</li>

{% endfor %}

</ul>

{% endif %}

</li>

{% endfor %}

</ul>

</nav>

</div>

<div class="global-sidebar__footer">

<div class="sidebar-actions">

{% set toggleContent %}

<span class="sidebar-action__prefix">

<span class="nav-icon" aria-hidden="true" id="sidebar-toggle-icon">

{% if craft.app.locale.getOrientation() == 'rtl' %}

{{ iconSvg('angle-left') }}

{% else %}

{{ iconSvg('angle-right') }}

{% endif %}

</span>

</span>

<span class="sidebar-action__label">

<span class="label">{{ 'Toggle sidebar'|t('app') }}</span>

</span>

{% endset %}

{% include '_includes/disclosure-toggle' with {

id: 'sidebar-trigger',

controls: 'global-sidebar',

state: sidebarState,

content: toggleContent,

attributes: {

class: 'sidebar-action',

},

} %}

</div>

{% if currentUser.admin and devMode %}

{% set devModeText = 'Craft CMS is running in Dev Mode.'|t('app') %}

<div id="devmode">

{% tag 'span' with {

class: 'visually-hidden',

} %}

{{ devModeText|raw }}

{% endtag %}

</div>

{% endif %}

</div>

</header>

</craft-global-sidebar>