SideMenu stylename "c-sidemenu-open" is removed after MenuItem click

Support
#1

Hi,

I’m currently implementing a sidemenu using a sideMenuToggleButton. What I’ve realized is that, after a menuitem click the stylename “c-sidemenu-open” (HaloTheme.SIDEMENU_PANEL_OPEN) is removed and therefore the sidebar is closed.

The relevant classes are WebSideMenu and CubaSideMenu:
image

image

I would like to keep the sidemenu opened after menuitem click. How can I keep the stylename “c-sidemenu-open”? Or what is the intention of the sidemenu toggle button?

Thx and regards,
Stephan

#3

Hi!

SideMenu with responsive styles is intended to correctly show menu in small screen devices. The default behavior is closing side panel when we click on a menu item because in small screen devices this panel takes a lot of space. Such behavior is the same as in Android and Polymer.

If you don’t want to close panel by click on menu item, you can extend WebSideMenu component:

public class SideMenuExt extends WebSideMenu {

    public SideMenuExt() {
        // set null or specific logic
        component.setBeforeMenuItemTriggeredHandler(null);
    }
}

In order to use your extended component in all application you need to create ui-component.xml in the root package in web module:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<components xmlns="http://schemas.haulmont.com/cuba/components.xsd">
    <component>
        <name>sideMenu</name>
        <class>com.company.demo.web.SideMenuExt</class>
    </component>
</components>

And in the web-app.properties file define following property:

cuba.web.componentsConfig = +com/company/demo/ui-component.xml

The whole sample you can see in the demo project: demo.zip (76.4 KB)

#4

Hi,
thank you very much :grin: Now I see how it works.
BR