Top Bar Menu Items with No Children

[athletechs]

Hello,

We would like for a couple items on the top menu bar to link directly to other pages without having to use a submenu. When we do this, the linked page is never rendered.

Code: Select all

 <li role="menuitem">
	                <a href="/login.jsf">
	                    <i class="topbar-icon fa fa-fw fa-sign-in"></i>
	                    <span class="topbar-item-name">Sign In</span>
	                </a>
	           	</li>

I see in another theme, a similar topic was raised. See viewtopic.php?f=65&t=51691
I tried to similar things in Barcelona with no luck, any advice would be greatly appreciated.

Thanks!
Dave

[mert.sincan]

Fixed for next version. Please make the following changes in layout.js;

Code: Select all

/** 
 * PrimeFaces Barcelona Layout
 */
PrimeFaces.widget.Barcelona = PrimeFaces.widget.BaseWidget.extend({
    
    
    _bindEvents: function() {
        ...
        
        this.topbarLinks.on('click', function(e) {
            
            /********************* PLEASE ADD THIS LINE (line 141) ***********************/
                  var href = link.attr('href');
                  if(href && href !== '#') {
                        window.location.href = href;
                  }
           /*********************************************************************/             
            e.preventDefault();   
        });
        
        ...
    },

Also, you can use jsf:outcome with <a> tag if you use JSF2.2. Please see; https://www.beyondjava.net/blog/jsf-2-2 ... eat-sheet/

Please try the following topbar.xhtml for this issue;

Code: Select all

<ui:composition 
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    xmlns:pa="http://primefaces.org/barcelona"
    xmlns:jsf="http://xmlns.jcp.org/jsf">

    <div class="topbar">
        <div class="logo">
            <h:link outcome="/dashboard">
                <p:graphicImage name="images/logo.png" library="barcelona-layout" />
            </h:link>
        </div>

        <p:graphicImage name="images/logo-text.svg" library="barcelona-layout" styleClass="app-name"/>

        <a id="topbar-menu-button" href="#">
            <i class="fa fa-bars"></i>
        </a>

        <ul class="topbar-menu fadeInDown animated">
            <li role="menuitem">
                <a jsf:outcome="login">
                    <i class="topbar-icon fa fa-fw fa-sign-out"></i>
                    <span class="topbar-item-name">Logout</span>
                </a>
            </li>
        </ul>
    </div>

</ui:composition>