Babylon Menu vs. PF Menu Bar Widget

[michaelgeorge]

I am able to add an options facet to the p:menubar widget (which doesn't look as good as the pb:menu), but I cannot do so with the pb:menu. Does the pb:menu widget support the options facet?

[mert.sincan]

Babylon menu is not a PrimeFaces component. It is a special component to use on Babylon and unfortunately, it doesn't support f:facet etc features of p:* components.

For your issue, please make the following changes;

Code: Select all

//BabylonMenuRenderer.java
public class BabylonMenuRenderer extends BaseMenuRenderer {

    @Override
    protected void encodeMarkup(FacesContext context, AbstractMenu abstractMenu) throws IOException {
        BabylonMenu menu = (BabylonMenu) abstractMenu;
        ResponseWriter writer = context.getResponseWriter();
        ...
        
        if(menu.getElementsCount() > 0) {
            encodeElements(context, menu, menu.getElements(), true);
        }
        
        /************* Please add the following lines (Line 51) **********/
        UIComponent optionsFacet = menu.getFacet("options");
        if (optionsFacet != null) {
            writer.startElement("li", null);
            writer.writeAttribute("class", "ui-babylon-menu-options", null);
            writer.writeAttribute("role", "menuitem", null);
            optionsFacet.encodeAll(context);
            writer.endElement("li");
        }
        /***************************************************************/
        
        writer.endElement("ul");
    }

Code: Select all

//webapp/resources/sass/overrides/_layout_styles.scss
/* Add your customizations of layout here */
body {
    .layout-wrapper {
        .layout-menu-container {
            .layout-menu {
                .ui-babylon-menu-options {
                    display: none;
                }
            }
        }
 
        &.layout-horizontal {
            .layout-menu-container {
                .layout-menu {
                    .ui-babylon-menu-options {
                        display: inline-block;
                        float: right;
                    }
                    @media screen and (max-width: 896px) {
                        .ui-babylon-menu-options {
                            float: none;
                        }
                    }
                }
            }
        }
    }
}

Then, please provide new css files using sass command.

Exp;

Code: Select all

<pb:menu>
    ....
    <f:facet name="options">
            <p:inputText />
            <p:commandButton value="Test"/>
        </f:facet>
</pb:menu>

Best Regards,