[#assign
	activeKey = ""
	expandedKeys = ""
	navItems = sourceObject.navItems
	navItemsJSONArray = ""
/]

<div class="vertical-navigation-fragment">
	[#if !navItems?has_content]
		[#if themeDisplay.isSignedIn()]
			<div class="alert alert-info">
				[@liferay.language key="there-are-no-menu-items-to-display" /]
			</div>
		[/#if]
	[#else]
		<nav class="menubar menubar-primary menubar-transparent">
			<ul aria-orientation="vertical" class="nav nav-nested" role="menubar">
				[@buildNavigation
					displayDepth=2
					navItemLevel=1
					navItems=navItems
				/]
			</ul>
		</nav>

		<script ${nonceAttribute} class="vertical-navigation-props" type="application/ld+json">
			{
				"active": "${activeKey}",
				"expandedKeys": [${expandedKeys}],
				"navItems": ${navItemsJSONArray}
			}
		</script>
	[/#if]
</div>

[#macro buildNavigation
	displayDepth
	navItemLevel
	navItems
]
	[#if navItems?has_content && ((displayDepth == 0) || (navItemLevel lte displayDepth))]
		[#assign navItemsJSONArray = navItemsJSONArray + "[" /]

		[#list navItems as navItem]
			[#assign navItemsJSONArray = navItemsJSONArray + "{" /]

			[#assign
				navItemCSSClass = "nav-item"
				navLinkCSSClass = "nav-link"
			/]

			[#if navItem.getChildren()?has_content]
				[#assign navItemCSSClass = "${navItemCSSClass} open" /]
			[/#if]

			[#if navItem.isChildSelected() || navItem.isSelected()]
				[#assign
					activeKey = navItem.getLayoutId()
					navLinkCSSClass = "${navLinkCSSClass} active"
				/]
			[/#if]

			<li class="${navItemCSSClass}" role="none">
				[#if navItem.isBrowsable()]
					[#assign navItemsJSONArray = navItemsJSONArray + '"href": "${navItem.getRegularURL()!}",' /]

					<a class="${navLinkCSSClass}" href="${navItem.getRegularURL()!}" ${navItem.getTarget()}>
						[@labelWithIcon navItem=navItem /]
					</a>
				[#elseif navItem.getChildren()?has_content]
					[#assign
						expandedKeys = expandedKeys + (expandedKeys?length > 0)?then(",", "") + '"${navItem.getLayoutId()}"'
						id = "navChildren" + navItem.getLayoutId()
					/]

					<button aria-controls="${id}" aria-expanded="true" class="btn btn-unstyled collapse-icon nav-link" disabled="disabled" role="menuitem" tabindex="-1" type="button">
						[@labelWithIcon navItem=navItem /]

						<span class="collapse-icon-closed">[@clay["icon"] symbol="angle-right-small" /]</span>
						<span class="collapse-icon-open">[@clay["icon"] symbol="angle-down-small" /]</span>
					</button>

					<ul class="nav nav-stacked show" id="${id}" role="menu">
						[#assign navItemsJSONArray = navItemsJSONArray + '"items": ' /]

						[@buildNavigation
							displayDepth=displayDepth
							navItemLevel=(navItemLevel + 1)
							navItems=navItem.getChildren()
						/]

						[#assign navItemsJSONArray = navItemsJSONArray + "," /]
					</ul>
				[#else]
					[@labelWithIcon navItem=navItem /]
				[/#if]
			</li>

			[#assign
				navItemsJSONArray = navItemsJSONArray + '"icon": "${(navItem.getIcon??)?then(navItem.getIcon(), "")}", "id": "${navItem.getLayoutId()}", "label": "${navItem.getName()}"}'
			/]

			[#if navItem?has_next]
				[#assign navItemsJSONArray = navItemsJSONArray + "," /]
			[/#if]
		[/#list]

		[#assign navItemsJSONArray = navItemsJSONArray + "]" /]
	[/#if]
[/#macro]

[#macro labelWithIcon navItem]
	<div class="autofit-row">
		[#assign icon = (navItem.getIcon??)?then(navItem.getIcon(), "") /]

		[#if icon?length > 0]
			<div class="autofit-col">
				[@clay["icon"] symbol="${icon}" /]
			</div>
		[/#if]

		<div class="autofit-col autofit-col-expand">${navItem.getName()}</div>
	</div>
[/#macro]