Prime Community Forum

Posted: **12 Feb 2020, 14:23**

Hi *,

for some pages of our application we try to use the serenity-theme without the sidebar. Therefor I changes the sidebar.xhtml to this

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">

    <f:event type="preRenderView" listener="#{....}"/>

    <!-- TODO Primefaces Serenity Theme richtig verdraten -->
    <div class="layout-sidebar #{....'}">

        <!-- LOGO: VERTICAL MENU -->
        <div class="sidebar-logo">
            <h:link outcome="/index">
                <h:graphicImage name="images/logo.svg" height="24" width="24" style="opacity: 0"/>
                <span class="app-name" style="margin-left: -28px">#{msgs['application.name']}</span>
            </h:link>
            <a href="#" class="sidebar-anchor" title="Toggle Menu"></a>
        </div>

        <ui:insert name="sidebar" />
    </div>

    <ui:insert name="sidebar-footer" />

    <h:outputScript library="scripts" name="sidebarTools.js"/>
</ui:composition>

Every page that whats to use the sidebar can no just do this

Code: Select all

<ui:define name="sidebar">
       my little sidebar ...
</ui:define>

But when the sidebar does not include the following

Code: Select all

<pm:menu id="xxx" model="#{...}" binding="#{...}" />

the javascript in layout.js of the theme is not initialized and then I cant use the dropdown on the profile button, the event is not bound to this.
See the image: https://ibb.co/c1fv9Gv

Posted: **28 Feb 2020, 12:05**

Hi,

Yes, layout.js file is loaded by the menu component on our Premium Template. For your issue;
- Please add a script tag to template.xhtml to load layout.js
- Please use;

Code: Select all

var Serenity = {
    init: function() {
        this.wrapper = $(document.body).children('.layout-wrapper');
       ....
    },
    
   // all codes
};

$(function() {
	Serenity.init();
});

Code: Select all

PrimeFaces.widget.Serenity = PrimeFaces.widget.BaseWidget.extend({    
   // all codes
});

Best Regards,

Prime Community Forum

Serenity Theme without Sidebar - Profile Dropdown not initialized

Serenity Theme without Sidebar - Profile Dropdown not initialized

Re: Serenity Theme without Sidebar - Profile Dropdown not initialized