gistfile1.txt

<#if entries?has_content>
    <#-- Styles  -->
    <style data-senna-track="temporary">
        .dropdown-submenu {
            position: relative;
        }

        .dropdown-menu {
            overflow: visible;
        }

        .dropdown-submenu .dropdown-menu {
            left: 100%;
            margin-left: .1rem;
            margin-right: .1rem;
            top: 0;
        }
    </style>

    <@navigation nav_items=entries is_first=true />

    <#--  Copying workaround from stack overflow for now  -->
	<@liferay_aui.script sandbox=true>
        <#--  Using jQuery since events are from bootstrap  -->
        $('.dropdown-menu .dropdown-toggle').on('click', function(e) {
            console.log(e);
            if (!$(this).next().hasClass('show')) {
                $(this).parents('.dropdown-menu').first().find('.show').removeClass('show');
            }
            var $subMenu = $(this).next('.dropdown-menu');
            $subMenu.toggleClass('show');


            $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
                $('.dropdown-submenu .show').removeClass('show');
            });


            return false;
        });
	</@liferay_aui.script>
</#if>


<#macro navigation nav_items is_first=false>
    <#assign ul_attributes = is_first?then("aria-label='" + languageUtil.get(request, "site-pages") + "' role='menubar'", "class='dropdown-menu'")  />

    <ul ${ul_attributes}>
        <#list nav_items as nav_item>
            <#assign
                nav_item_attr_has_popup = ""
                nav_item_css_class = nav_item.hasChildren()?then('dropdown-submenu', '')
                nav_item_layout = nav_item.getLayout()
            />

            <#if nav_item.isSelected()>
                <#assign
                    nav_item_attr_has_popup = "aria-haspopup='true'"
                    nav_item_css_class = "selected"
                />
            </#if>

            <#if nav_item.hasChildren() && is_first>
                <#assign nav_item_css_class = "dropdown" />
            </#if>

            <#if nav_item.hasChildren() && !is_first>
                <#assign nav_item_css_class = "dropdown-submenu" />
            </#if>

            <li class="${nav_item_css_class}" id="layout_${nav_item.getLayoutId()}" role="presentation">
                <a aria-labelledby="layout_${nav_item.getLayoutId()}" ${nav_item_attr_has_popup} href="${nav_item.getURL()}" ${nav_item.getTarget()} role="menuitem"><span><@liferay_theme["layout-icon"] layout=nav_item_layout /> ${nav_item.getName()}</span></a>

                <#if nav_item.hasChildren()>
                    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        >
                    </button>

                    <@navigation nav_items=nav_item.getChildren() />
                </#if>
            </li>
        </#list>
    </ul>
</#macro>