<style>
.far{
	color:red;
}
.nav-active a span{
	font-weight: bold;
}
</style>
<#if !entries?has_content>
	<#if preview>
		<div class="alert alert-info">
			<@liferay.language key="there-are-no-pages-to-display-for-the-current-page-level" />
		</div>
	</#if>
<#else>
	<#assign
		portletDisplay = themeDisplay.getPortletDisplay()

		navbarId = "navbar_" + portletDisplay.getId()
	/>
	<div id="${navbarId}">
		<ul class="tt" id="my-menu-nav" style="list-style-type: none;">
			<h1 class="hide-accessible"><@liferay.language key="navigation" /></h1>

			<#assign navItems = entries />

			<#list navItems as navItem>
				
				<#assign showChildren = navItem.hasBrowsableChildren() />

				<#if navItem.isBrowsable() || showChildren>
					<#assign
						nav_item_attr_has_popup = ""
						nav_item_attr_selected = ""
						nav_item_caret = ""
						nav_item_css_class = "lfr-nav-item"
						nav_item_href_link = ""
						ins = ""
						nav_item_link_css_class = ""
					/>

					<#if showChildren>

						<#assign nav_item_caret = '<span class="lfr-nav-child-toggle"><i class="${ins}"></i></span>' />
						<#assign
							nav_item_css_class = "${nav_item_css_class}"
							<#-- nav_item_link_css_class = "dropdown-toggle" -->
						/>
					</#if>

					<#if navItem.isBrowsable()>
						<#assign nav_item_href_link = "href='${navItem.getURL()}'" />
					</#if>
					
					<#if showChildren == true>
						<#assign nav_item_href_link = "href='#'" />
						<#assign ins = "style='list-style-type: disc;'" />
					</#if>
					
					<#if navItem.isSelected()>
						<#assign
							nav_item_attr_selected = "aria-selected='true'"
							nav_item_css_class = "${nav_item_css_class} selected active"
						/>
					</#if>

					<li class="${nav_item_css_class}" ${ins} id="layout_${navItem.getLayoutId()}" ${nav_item_attr_selected}>
						<a class="${nav_item_link_css_class}" ${nav_item_href_link} ${navItem.getTarget()}>
							<span><@liferay_theme["layout-icon"] layout=navItem.getLayout() /> ${navItem.getName()} ${nav_item_caret}</span>
						</a>

						<#if showChildren>
							<ul class="child-menu" style="display:none;" id="ul_layout_${navItem.getLayoutId()}">
								<#list navItem.getBrowsableChildren() as childNavigationItem>
									<#assign
										nav_child_attr_selected = ""
										nav_child_css_class = ""
									/>

									<#if childNavigationItem.isSelected()>
										<#assign
											nav_child_attr_selected = "aria-selected='true'"
											nav_child_css_class = "active selected"
										/>
										<script>
											$('ul#ul_layout_${navItem.getLayoutId()}').removeAttr("style");
											$('#layout_${navItem.getLayoutId()}').addClass('nav-active');
										</script>
									</#if>

									<li class="${nav_child_css_class}" id="layout_${childNavigationItem.getLayoutId()}" ${nav_child_attr_selected} role="presentation">
										<a href="${childNavigationItem.getURL()}" ${childNavigationItem.getTarget()}>${childNavigationItem.getName()}</a>
									</li>
								</#list>
							</ul>
						</#if>
					</li>
				</#if>
			</#list>
		</ul>
	</div>
</#if>

<@liferay_aui.script>
$(document).ready(function() {
  $('ul#my-menu-nav ul').each(function(index) {
    $(this).prev().addClass('collapsible').click(function() {
      if ($(this).next().css('display') == 'none') {
        $(this).next().slideDown(200, function () {
          $(this).prev().removeClass('collapsed').addClass('expanded');
        });
      }else {
        $(this).next().slideUp(200, function () {
          $(this).prev().removeClass('collapsed').addClass('expanded');
          $(this).find('ul').each(function() {
            $(this).hide().prev().removeClass('expanded').addClass('collapsed');
          });
        });
      }
      return false;
    });
  });
});
</@>